15

我正在开发一个快速原型制作工具，我想为其动态生成界面，并将数据动态地绑定到创建的元素。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 数据绑定到生成的接口。

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

4

1 回答 1

32

看起来您的模型的字段和类型要到运行时才能知道。对于这种动态生成的模型，假设您需要双向绑定，您需要编写一些将其属性转换为可观察对象的代码。最基本的，您可以遍历 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>。

于 2012-11-17T00:20:54.527 回答