0

Grower、Branch、GrowerList の 3 つのビューモデルを含むビューがあります。

Grower と Branch の 2 つのボタンがあります。GrowerList は、選択したブランチに依存します。

シナリオは次のとおりです。 1. ユーザーがそのページに来ると、ブランチのリスト (BranchList) が表示されます。(jQuery モバイルのリストビューを使用してリストを表示します)。

  1. ユーザーは BranchList からブランチを選択します

  2. ユーザーは「栽培者」ボタンをクリックして栽培者のリストを表示し、栽培者を選択できます。

  3. 「Grower」ボタンをクリックすると、栽培者の一覧（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>

問題は、正しいデータが GetGrowers メソッドから取得されていることを Firebug で確認できますが、Grower ボタンが最初にクリックされたときを除いて、GrowerList として何も表示されないことです。私は何を間違っていますか？JavaScriptエラーはありません。

4

1 に答える 1

0

applyBindingsビュー モデルとビュー エバーに対しては 1 回だけにしてください。もう一度呼び出すと、ここに示されているように、期待どおりに動作しません。

あなたがすべきことは、最初の読み込み時にバインディングを一度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 に答える