0

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

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

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

  1. 用户从 BranchList 中选择一个分支

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

  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错误。

4

1 回答 1

0

您应该只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视图模型上的函数，该函数又会更新该数组。

于 2012-09-25T00:46:01.737 回答