Question

我有三个视图模型的视图：Grower，Branch和GrowerList。

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

方案如下： 1.当用户访问该页面时，将显示分支列表（BranchList）。（使用jQuery mobile的listview显示列表）。

用户从BranchList
用户可以点击“种植者”按钮显示种植者名单，然后选择种植者。
单击“种植者”按钮时，会显示种植者列表（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设置为新的值数组。使用knockout的绑定来处理click事件比在这里混合使用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函数，然后更新该数组。

敲门虫？ applyBindings不起作用（Asp.net mvc4 mobile）

1 个答案: