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]);
   }
}

对于视图绑定，它取决于什么是“创建界面元素”。如果他们可以在创建时向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>。

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

1 个答案: