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

Question

我正在研究一种快速原型设计工具,我想动态生成该接口,并动态地将数据数据绑定到创建的元素.ViewModel看起来像:

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

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

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

至于视图绑定,它取决于什么是"创建界面元素".如果他们可以data-bind在创建时向HTML元素添加属性,那么一切都应该是直截了当的:只要在ko.applyBindings创建界面并附加到DOM后立即运行.如果由于某种原因您无法添加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>.