淘汰错误？ applyBindings 不起作用（Asp.net mvc4 移动版）

Question

我有一个包含三个视图模型的视图：Grower、Branch 和 GrowerList。

有两个按钮，Grower 和 Branch。 GrowerList 取决于所选的分支。

场景如下： 1. 当用户来到那个页面时，会显示一个分支列表（BranchList）。 （使用 jQuery mobile 的 listview 显示列表）。

1. 用户从BranchList中选择一个Branch

2. 用户可以点击“Grower”按钮显示种植者列表，然后可以选择种植者。

3. 单击“种植者”按钮时，将显示种植者列表 (GrowerList)。 GrowerList 取决于所选的分支 ID。

Grower、Branch 和 GrowerList，每个都有一个 ViewModel。我正在执行以下操作来显示更新后的 GrowerList：

     $("#btnGrower").click(function () {
     ko.applyBindings(new GrowerListModel(), document.getElementById("divGrowerList"));
     });

GrowerList 的 ViewModel 如下所示：

    function MyGrower(data) {
     this.Id = ko.observable(data.GrowerId);
     this.name = ko.observable(data.GrowerName);
    }

    function MyGrowerListModel() {
     // Data
     var self = this;
     self.growers = ko.observableArray([]);

     //Load initial state from server and populate viewmodel
     $.getJSON("Grower/GetGrowers", function (allData) {
     var mappedUsers = $.map(allData, function (item) { return new MyGrower(item) });
     self.growers(mappedUsers);
     });
    }

还有，我绑定值的地方：

    <div id="divGrowerList">
           <ul data-bind="foreach: growers" data-role="listview" id="ulGrowerList">
              <li><a data-bind="attr: {id: Id}"><span data-bind="text: name" /></a></li>
          </ul>

    </div>

问题是，虽然我通过 Firebug 看到正确的数据来自 GetGrowers 方法，但除了第一次单击 Grower 按钮时，GrowerList 没有显示任何内容。我究竟做错了什么？没有 javascript 错误。

Answer 1

对于视图模型和视图，您应该只applyBindings 一次。再次调用它，事情将不会像您在这里看到的那样工作。

您应该做的是在初始加载时应用绑定一次，并调用将growers 设置为新值数组的方法。使用敲除的绑定来处理点击事件比在这里混合 jquery 更容易。

<button data-bind="click: updateGrowers"></button>

function MyGrowerListModel() {
    // Data
    var self = this;
    self.growers = ko.observableArray([]);

    self.updateGrowers = function () {
        $.getJSON("Grower/GetGrowers", function (allData) {
            var mappedUsers = $.map(allData, function (item) { return new MyGrower(item) });
            self.growers(mappedUsers);
        });
    };

    //Load initial state from server and populate viewmodel
    self.updateGrowers();
}

然后，每次单击按钮都会调用视图模型上的 updateGrowers 函数，该函数又会更新该数组。