Question

为什么文本绑定工作和值不起作用，如果我选择带有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>

以下是JSFiddle http://jsfiddle.net/mounir/V3nVd/15/

中的完整示例

由于

Answer 1

您的.popover将呈现模板的html复制为data-属性。

看起来绑定不适用于动态插入的html。 value:绑定（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>

只是：

<p>Name: <input type="text"></p>
<p>Email: <b>ben@msn.com</b></p>

因此空<input>但已填充<b>代码。

要解决此问题，您可以将淘汰赛将value的{{1}}属性设置为所需的值：

<input>

这会填充<p>Name: <input type="text" data-bind="attr: { value: $data.name }"></p> <p>Email: <b data-bind="text: $data.email"></b></p>。但请记住，价值不再是可观察的。

每次调用<input>时都会更新值，但是如果在显示弹出窗口时更新了observable，则不会更新。您也无法通过编辑.popover来更新observable。

您应该考虑将自定义绑定扩展到所有这些的帐户，例如在弹出窗口关闭时从<input>获取值并将其放回到observable中。

Answer 2

感谢您的回答Sethi。是的，但如果我不想让我的输入可观察，我应该在init函数中传递viewModel，并在popover div中应用绑定。对于每次使用点击事件时的弹出窗口，我设置了ko.applyBindings(viewModel, thePopover);

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);
        });
    },
};

Answer 3

这是一个完整的工作示例，我将ko.applyBindings()更改为ko.applyBindingsToDescendants以包含绑定上下文$ root和$ parent，当我们想要将按钮关联到例如根中的函数时视图模型。

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

看看@ http://jsfiddle.net/mounir/Mv3nP/4/

输入值未在弹出窗口中呈现

3 个答案: