淘汰赛绑定对象

我花了一些时间试图找出为什么绑定不成功的HTML部分中'（不工作绑定）'没有成功。我有一个简单的玩家列表;当点击其中一个时，我应该看到底部页面中绑定的名称发生变化： 1）与vm.selectedPlayerName绑定的玩家名称正确显示 2）与vm.selectedPlayer.name（）绑定的玩家名称显示正确仅在页面加载时和从不点击事件时，即使控制台日志在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>

来源

2013-02-03 Stefano

的问题是，你并没有使用一些东西到SelectedPlayer观察到：

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

应该是：

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

记住，可观察到的在技术上是一个功能。当您通过赋值运算符赋值时，您将其作为函数覆盖它，将其替换为仅在淘汰模型中的页面加载时处理的对象。

来源

2013-02-03 17:53:38

淘汰赛绑定对象

回答

相关问题