1

シングルページアプリケーションの例（ノックアウトチュートリアル）とマッピングプラグインを使用して、ユーザーがクリック（選択）できるアイテムのリストを作成しようとしています。最初からデフォルトのアイテムを選択する必要があります。これは、マッピングプラグインでは、ベアノックアウトでは機能しますが機能しない場所です。私は何かが足りないのですか？またはマッピングプラグインをどのように飼いならしますか？

HTMLパート：

<ul data-bind="foreach: gamePlayers">
    <li class="clickable" data-bind="
              text: playerName, 
              css: { selected: playerId == $root.chosenPlayerId() },                              
              click: $root.selectPlayer">
    </li>
</ul>

JS共通部分：

var dataJS = {
    gamePlayers: [{playerId:1, playerName:"Sun"},{playerId:2,playerName:"Moon"}],
    playerActive:1
};

動作するJS：

function GameViewModel(data) {
    // Data
    var self = this;
    self.gamePlayers = ko.observableArray(data.gamePlayers);
    self.chosenPlayerId = ko.observable();

    // Behaviours    
    self.selectPlayer = function (player) { self.chosenPlayerId(player.playerId); };
    self.selectPlayer(data.gamePlayers[0]);
}

ko.applyBindings(new GameViewModel(dataJS));

動作しないJS：

my.vmPlayers = {};

function MyViewModel (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
    self.chosenPlayerId = ko.observable();
    self.selectPlayer = function (player) { self.chosenPlayerId(player.playerId); };
    self.selectPlayer(data.gamePlayers[0]);
}

var mapping = {
    create: function (options) {
        return new MyViewModel(options.data);
    }
};

my.vmPlayers = ko.mapping.fromJS(dataJS, mapping);
ko.applyBindings(my.vmPlayers);

動作しない例http://jsfiddle.net/HeroEja/43AtS/

したがって、このバインディングcss：{selected：playerId == $ root.chosenPlayerId（）}は、最初のページの読み込み時に評価されません。なぜ大いに感謝しているのか考えてみてください！

4

1 に答える 1

1

主な問題はこの行によって引き起こされます：

self.chosenPlayerId(data.playerActive);

このコンテキストでdataはJSオブジェクトではなくdata、JSON文字列自体を保持しているためdata.playerActive、未定義が返され、最初の選択は機能しません。

必要なものは次のとおりです。

self.chosenPlayerId(self.playerActive());

とにかくデータをにマッピングしたselfのでko.mapping.fromJS(data, {}, self);

そして、マッピングプラグインのためplayerIdに観察可能になるので、それを機能させるためにそれに応じて使用法を変更する必要があります

したがって、cssバインディングでは：

css: { selected: playerId() == $root.chosenPlayerId() }

そしてあなたのselectPlayer方法では：

self.selectPlayer = function (player) {
    self.chosenPlayerId(player.playerId());
};

修正されたデモJSFiddle。

于 2013-03-15T08:48:46.150 に答える