Knockout.js 动态视图模型

如何从通过Ajax返回的JS对象构建动态视图模型

创建可观察对象和可观察数组时，视图不包含任何数据，除非在每次获取后绑定，否则会导致多次绑定警报

我的JS

我的HTML：

<span data-bind="text: Summary.Count"></span>
<table data-bind="foreach: Details">
    <tr>
        <td data-bind="text: Name"></td>
        <td><button data-bind="click: $root.Clicked"></button></td>
    </tr>
</table>

---

关键是初始化可观察对象，并明智地使用绑定（如

with

，

if

，以及

foreach

），在可观察对象中设置非空值之前，这些绑定不会绑定子元素。当您通过AJAX获取数据时，设置可观察项（使用（）形式），而不是重新定义。映射直数组（即未嵌入对象中）的处理方式可能略有不同，可以通过使用空数组调用

ko.Mapping

，然后使用

ko.Mapping.fromJS（data.Status，self.Details）更新映射来初始化

另外两点：

由于将
View.Load（）
传递到
ko.applyBindings
中，因此必须从该方法返回ViewModel

单击的
处理程序应位于ViewModel内

--

这里有一个功能性的小把戏：
关键是初始化可观察对象，并明智地使用绑定（如
with
，
if
，以及
foreach
），这些绑定在可观察对象中设置非空值之前不会绑定子元素。当您通过AJAX获取数据时，设置可观察项（使用（）形式），而不是重新定义。映射直数组（即未嵌入对象中）的处理方式可能略有不同，可以通过使用空数组调用
ko.Mapping
，然后使用
ko.Mapping.fromJS（data.Status，self.Details）更新映射来初始化

另外两点：

由于将
View.Load（）
传递到
ko.applyBindings
中，因此必须从该方法返回ViewModel

单击的
处理程序应位于ViewModel内

--

这是一把功能正常的小提琴：

<span data-bind="text: Summary.Count"></span>
<table data-bind="foreach: Details">
    <tr>
        <td data-bind="text: Name"></td>
        <td><button data-bind="click: $root.Clicked"></button></td>
    </tr>
</table>