使用 knockout.js 动态生成下拉列表和绑定选项答案

【问题标题】：Dynamically generate drop-down lists and bind options with knockout.js使用 knockout.js 动态生成下拉列表和绑定选项
【发布时间】：2014-03-15 02:41:55
【问题描述】：

这个小提琴演示了我的问题：http://jsfiddle.net/timvdh/QMM5b/2/

模型会创建一个下拉列表，如果点击“添加列表”会创建另一个下拉列表 OK，更多的点击会产生未绑定的列表。

这是因为额外的 observables 是在模型绑定后创建的，所以没有用。

// this will create an observable which is not bound to the UI
if (!ko.isObservable(self.listData()[field]))
    self.listData()[field] = ko.observableArray([]);

我想这种情况并不少见。我能做的是预先准备一个足够大的空可观察对象列表（用于 self.listData 和 self.data 属性）。我真正的大型单页应用程序需要未知数量的控件（通过 JSON 加载的元数据），所以我希望有更好的方法。

【问题讨论】：

标签： knockout.js

【解决方案1】：

您的代码中只有执行顺序错误：

首先您需要在self.listData() 上创建新的可观察字段
然后您需要将该字段添加到self.metaData.push(field);，因为这将触发foreach，到那时您的可观察对象已经存在。

所以你的addMetaData 应该是这样的：

self.addMetaData = function() {
    var field = "field" + self.fieldNum++;

    if (!ko.isObservable(self.listData()[field]))
        self.listData()[field] = ko.observableArray([]);

    if (!ko.isObservable(self.data()[field]))
        self.data()[field] = ko.observable("B");           

    self.listData()[field].push(new ListEntry("Value A", "A"));
    self.listData()[field].push(new ListEntry("Value B", "B"));

    self.metaData.push(field);
}

演示JSFiddle.

【讨论】：

非常感谢，我没有考虑到需要处理“外部”集合。在 UI 中，如果我可以先处理元数据（绘制下拉菜单）然后异步加载下拉选项（它们可能会在 100 毫秒后通过 $.ajax 到达）会更好。会不会复杂很多？
你可以稍后加载下拉菜单，重点是self.metaData.push(field);应该在self.listData()[field] = ko.observableArray([]);之后jsfiddle.net/p33yX