Knockoutjs 编程数据绑定到生成的接口

Question

我正在开发一个快速原型工具，我想动态生成接口，并将数据动态绑定到创建的元素。视图模型如下所示：

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

vmSchema 将用于根据界面元素的类型创建界面元素，然后 vmData 将数据绑定到这些元素。

创建接口没有问题。挑战在于以编程方式将 vmData mdoel 数据绑定到生成的接口。

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

Answer 1

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

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

至于视图绑定，这取决于"创建界面元素"的内容。如果他们可以在创建时向 HTML 元素添加data-bind属性，那么一切都应该很简单：只需在创建接口并附加到 DOM 后立即运行ko.applyBindings。如果由于某种原因无法添加data-bind装饰，则可以使用稍微未记录的ko.applyBindingsToNode手动指定绑定。

// 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>.