动态绑定到 knockout.js 中的动态元素答案

【问题标题】：Dynamic binding to dynamic elements in knockout.js动态绑定到 knockout.js 中的动态元素
【发布时间】：2014-03-13 00:46:06
【问题描述】：

我正在尝试构建一个绑定，允许我根据我的视图模型中的属性更改输入元素的类型，并将该输入元素的值绑定到我的视图模型的另一个属性。

我有以下小提琴显示我想要完成的事情：fiddle

<div data-bind="dynamic: theType, value: 'theValue'"></div>

ko.bindingHandlers.dynamic = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var vm = valueAccessor();
        var $element = $(element);

        var choice = ko.unwrap(vm) || 'shortText';
        var bindTo = allBindings.get('value');

        if (choice === 'longText') {
            $element.html("<textarea rows='4' data-bind='value: " + bindTo + "' valueUpdate: 'afterkeydown' />");
        } else {
            $element.html("<input type='text' data-bind='value: " + bindTo + "' valueUpdate: 'afterkeydown' />");
        } // if

        ko.applyBindings(viewModel, $element.find(':input')[0]);
    }
};

var vm = {
    theValue: ko.observable(''),
    theType: ko.observable(''),
};
ko.applyBindings(vm);

不幸的是，我尝试过的所有操作都导致元素和视图模型之间的链接丢失，或者淘汰抱怨我无法多次将绑定应用于同一个元素。我知道我可以使用模板做到这一点，但我想知道为什么我的方法不起作用。

有人有什么建议吗？

谢谢，

不要

【问题讨论】：

你不能有多个 applyBindings
这不是真的。请注意，bindingHandler 内部的调用具有可选的第二个参数来限制调用的范围。这是完全合法的，网上到处都有例子。
我对第二个 applyBindings 感到好奇，即使有范围。如果你在小提琴上打开开发者工具/萤火虫，你会看到你收到这个错误：“你不能多次将绑定应用到同一个元素。”
是的，这就是问题所在。我不明白的是第一个应用程序是什么。如果我把这条线拿出来，更新就会失去数据绑定。

标签： jquery knockout.js

【解决方案1】：

好的。原来我只需要添加：

return { controlsDescendantBindings: true };

从我的init方法，淘汰赛和我相处得很好。在此处查看更新的小提琴：http://jsfiddle.net/X4xXL/2/

【讨论】：