1

为什么文本绑定有效而值不起作用，如果我使用 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>

​</p>

这是 JSFiddle http://jsfiddle.net/mounir/V3nVd/15/中的完整示例

谢谢

4

3 回答 3

2

您.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属性设置<input>为所需的值：

<p>Name: <input type="text" data-bind="attr: { value: $data.name }"></p>
<p>Email: <b data-bind="text: $data.email"></b></p>

这填充了<input>. 但请记住，这些值不再是可观察的。

每次.popover调用时都会更新这些值，但如果在显示弹出框时更新了可观察对象，则不会更新。您也不能通过编辑<input>.

您应该考虑扩展您的自定义绑定以解决所有这些问题，例如从<input>弹出窗口关闭时获取值并将其放回可观察对象中。

于 2012-10-23T16:40:34.073 回答
0

感谢您的回答塞西。是的，但是如果我不想让我的输入仍然可观察，我应该在 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);
        });
    },
};
于 2012-10-24T08:22:54.920 回答
0

这是一个完整的工作示例，当我们希望将按钮关联到例如根视图模型中的函数时，我将其更改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/

于 2012-10-24T14:48:19.030 回答