Knockout.js 使用映射插件时在敲除绑定中的初始评估_Knockout.js_Knockout Mapping Plugin

Knockout.js 使用映射插件时在敲除绑定中的初始评估

knockout.js

Knockout.js 使用映射插件时在敲除绑定中的初始评估,knockout.js,knockout-mapping-plugin,Knockout.js,Knockout Mapping Plugin,我试图使用一个单页应用程序示例淘汰教程和映射插件创建一个项目列表，用户可以单击选择。我需要从一开始就选择一个默认项，这就是映射插件无法工作的地方，尽管它可以与裸敲除一起工作。我错过什么了吗？或者如何驯服映射插件 HTML部分： <ul data-bind="foreach: gamePlayers"> <li class="clickable" data-bind=" text: playerName, css:

我试图使用一个单页应用程序示例淘汰教程和映射插件创建一个项目列表，用户可以单击选择。我需要从一开始就选择一个默认项，这就是映射插件无法工作的地方，尽管它可以与裸敲除一起工作。我错过什么了吗？或者如何驯服映射插件

HTML部分：

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

确实有效的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);

它如何不起作用的示例

因此，此绑定css:{selected:playerId==$root.chosenPlayerId}不会在初始页面加载时计算。你知道为什么吗？非常感谢

主要问题是由这条线路引起的：

self.chosenPlayerId(data.playerActive);

因为在此上下文中，数据不是JS对象，但数据本身包含JSON字符串，因此data.playerActive将返回未定义，并且您的初始选择将不起作用

您需要的是：

self.chosenPlayerId(self.playerActive());

因为您还是使用ko.mapping.fromJSdata，{}，self将数据映射到了self

由于映射插件playerId是可观察的，所以您需要相应地更改您的用法以使其工作

因此，在css绑定中：

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

在selectPlayer方法中：

一个固定的演示。

主要问题是由这一行引起的：

self.chosenPlayerId(data.playerActive);