knockout.js - Knockoutjs 编程数据绑定(bind)到生成的接口(interface)

Question

我正在开发一个快速原型(prototype)制作工具，我想为其动态生成界面，并将数据动态数据绑定(bind)到创建的元素。 ViewModel 看起来像:

var viewModel = {
    vmSchema: { 
            "Id" : "int",
            "Name" : "string",
            "UpdatedOn" : "date"
    },
    vmData: { 
            "Id": "123"
            "Name" : "Bob",
            "UpdatedOn" : "2012-11-16T00:00:00"
    }
}

vmSchema 将用于根据其类型创建接口(interface)元素，然后 vmData 将数据绑定(bind)到这些元素。

创建接口(interface)没有问题。挑战是以编程方式将 vmData mdoel 数据绑定(bind)到生成的接口(interface)。

是否有任何工具或技术可以允许这种类型的编程数据绑定(bind)？

Answer 1

看起来您的模型的字段和类型要到运行时才能知道。对于这种动态生成的模型，假设您需要双向绑定(bind)，您需要编写一些将其属性转换为可观察对象的代码。最基本的，您可以遍历 vmData 并将其中的所有内容转换为 ko.observable:

for (var member in viewModel.vmData) {
   if (viewModel.vmData.hasOwnProperty(member)) {
       viewModel.vmData[member] = ko.observable(viewModel.vmData[member]);
   }
}

至于 View 绑定(bind)，它取决于什么是“创建界面元素”。如果他们可以添加 data-bind在创建时赋予 HTML 元素的属性，那么一切都应该很简单:只需运行 ko.applyBindings一旦接口(interface)被创建并附加到 DOM。如果由于某种原因您无法添加 data-bind装饰，然后您可以使用稍微未记录的 ko.applyBindingsToNode 手动指定绑定(bind).

// manually specify a binding for an element
var elm = document.getElementById('some_elm');
ko.applyBindingsToNode(elm, { value: viewModel.vmData.id}, viewModel.vmData );

以上等价于 <span class="some_elm" data-bind="value: vmData.id"></span> .