Twitter bootstrap 输入值未在popover中呈现

为什么文本绑定起作用而值不起作用，如果我用jquery选择ID为的元素并在控制台中打印她的值，则值是正确的，但不会显示

<center>
  <h2>Popover Demo</h2>
  <div data-bind="template: {name: 'popoverTemplate', foreach: commands}"></div>
</center>

<script type="text/html" id="popoverTemplate">
    <div style="display:none;" data-bind="attr: {'id': $data.command + 'Content'}, template: {name: 'popoverContent', data: $data.content}"></div>    
    <a href="#" class="btn" data-bind='text: $data.command, popover: $data'></a>
</script>

<script type="text/html" id="popoverContent">
    <p>Name: <input type="text" data-bind='value: $data.name'></p>
    <p>Email: <b data-bind='text: $data.email'></b></p>
</script>

爆米花演示
姓名：

电邮：

​

下面是JSFIDLE中的完整示例

---

谢谢您的

.popover

将呈现模板的html复制到

数据-

属性中

看起来绑定不适用于动态插入的html。

值：

绑定（ko默认值）通过javascript

.value（'sample text'）

方法设置输入。因此，本质上，复制的HTML：

<p>Name: <input type="text" data-bind='value: $data.name'></p>
<p>Email: <b data-bind='text: $data.email'>ben@msn.com</b></p>

这将填充

。但请记住，这些值不再是可见的

每次调用

.popover

时都会更新这些值，但如果在显示popover时更新了观测值，则不会更新这些值。您也无法通过编辑

来更新可观察对象

---

你应该考虑扩展你的自定义绑定来考虑所有这些，比如当PopOver关闭并把它放回可观察到的时候，从代码< >代码>中获取值。

< P>谢谢你的回答塞西。 是的，但是如果我不想让我的输入仍然可见，我应该在init函数中传递viewModel，并在popover div中应用绑定。在使用click事件时，我为每个popover设置

ko.applyBindings（viewModel，thepover）

ko.bindingHandlers.popover={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
var attribute=ko.utils.unwrapobbservable（valueAccessor（））；
var cssSelectorForPopoverTemplate=attribute.content；
var popOverTemplate=“”+$（cssSelectorForPopoverTemplate.html（）+”；
$（元素）.popover({
内容：popOverTemplate，
是的，
触发器：“手动”
});
$（元素）。单击（函数（）{
$（this.popover（'toggle'）；
var thepover=document.getElementById（attribute.id+“-popver”）；
ko.应用绑定（视图模型、端口）；
});
},
};
这是一个完整的工作示例，我将
ko.applyBindings（）
更改为
ko.applybindingstodegenders
，以便在将按钮（例如）与根视图模型中的函数关联时，包含绑定上下文$root和$parent

$(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
        });

看一看@
一把工作小提琴可能对其他人有帮助。将我的答案标记为正确也一样。是的，当然，但你的答案并不能解决我的问题。我知道我没有向你提供自定义绑定代码，但我让你朝着正确的方向前进。毕竟，你的问题是“为什么文本绑定起作用而值不起作用……”——我回答了；）
<p>Name: <input type="text" data-bind="attr: { value: $data.name }"></p>
<p>Email: <b data-bind="text: $data.email"></b></p>

ko.bindingHandlers.popover = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var attribute = ko.utils.unwrapObservable(valueAccessor());
        var cssSelectorForPopoverTemplate = attribute.content;
        var popOverTemplate = "<div id='"+attribute.id+"-popver'>" + $(cssSelectorForPopoverTemplate).html() + "</div>";
        $(element).popover({
            content: popOverTemplate,
            html: true,
            trigger: 'manual'
        });

        $(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popver");
            ko.applyBindings(viewModel, thePopover);
        });
    },
};

$(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
        });