0

HTMLセクションの「（クリック時にバインディングが機能しない）」が成功せずにバインディングが機能しない理由を理解するのに少し時間を費やしました。プレーヤーの簡単なリストがあります。それらの 1 つをクリックすると、下のページでバインドされた名前が変更されていることがわかります。1) vm.selectedPlayerName にバインドされたプレーヤー名が正しく表示されます。コンソール ログが selectedPlayer オブジェクトに適切な変更を示している場合でも、クリック イベントでは発生しません。ビューモデルでプロパティを再定義することを避けるために、2）を機能させたいと思います。私は何を間違っていますか？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js'></script>
<script>
    $(document).ready(function () {
        var my = {}; //my namespace
    // Player
    my.Player = function () {
        this.name = ko.observable("");
    };

    // The ViewModel
    my.vm = function () {
        var
        players = ko.observableArray([]),
        selectedPlayer = ko.observable(),
        selectedPlayerName = ko.observable(""),

        goToDetails = function (aPlayer) {
            my.vm.selectedPlayer = aPlayer;
            my.vm.selectedPlayerName(my.vm.selectedPlayer.name());
            console.log("goToDetails: ", my.vm.selectedPlayerName());
        },

        loadPlayers = function () {
            my.vm.players.push(new my.Player().name("Player1"));
            my.vm.players.push(new my.Player().name("Player2"));
            my.vm.players.push(new my.Player().name("Player3"));
            my.vm.selectedPlayer = my.vm.players()[0];
            my.vm.selectedPlayerName(my.vm.selectedPlayer.name());
        };

        return {
            // Data
            players: players,
            selectedPlayer: selectedPlayer,
            selectedPlayerName: selectedPlayerName,
            // Other
            loadPlayers: loadPlayers,
            goToDetails: goToDetails,
        };
    }();

    my.vm.loadPlayers();
    ko.applyBindings(my.vm);
    });
</script>
<title></title>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: players">
        <tr>
            <td data-bind="text: name, click: $root.goToDetails"></td>
        </tr>
    </tbody>
</table>
<p>
    Selected player (working binding on click): <span data-bind='text:  $root.selectedPlayerName'></span>
    <br />
    Selected player (not working binding on click): <span data-bind='text:  selectedPlayer.name()'></span>
</p>

</body>

4

1 に答える 1

2

問題は、SelectedPlayer オブザーバブルに何かを割り当てていないことです。

 goToDetails = function (aPlayer) {
       my.vm.selectedPlayer = aPlayer;
       ...
  },

次のようにする必要があります。

 goToDetails = function (aPlayer) {
       my.vm.selectedPlayer(aPlayer);
       ....
  },

Observable は技術的には FUNCTION であることを忘れないでください。代入演算子を介して割り当てると、関数として上書きされ、オブジェクトに置き換えられます。オブジェクトは、ノックアウト モデルでページの読み込み時にのみ処理されます。

于 2013-02-03T17:53:38.933 に答える