0
html 섹션에서 바인딩이 성공하지 못하는 이유를 알아 냈습니다. ('클릭 연결시 작동하지 않음'). 간단한 플레이어 목록이 있습니다. 그 중 하나를 클릭하면 아래쪽 페이지에서 바인드 된 이름이 변경됩니다. 1) vm.selectedPlayerName으로 바인드 된 플레이어 이름이 올바르게 표시됩니다. 2) vm.selectedPlayer.name()로 바인드 된 플레이어 이름이 올바르게 표시됩니다. 콘솔로드가 selectedPlayer 객체에서 적절한 변경을 표시하는 경우에도 페이지로드 시간에만 발생하고 클릭 이벤트에서는 절대로 발생하지 않습니다. 2)보기 모델의 속성을 다시 정의하지 않으려 고합니다. 내가 뭘 잘못하고 있니? 관찰은 기술적이다,녹아웃 바인딩 오브젝트
이goToDetails = function (aPlayer) {
my.vm.selectedPlayer(aPlayer);
....
},
가 기억
goToDetails = function (aPlayer) {
my.vm.selectedPlayer = aPlayer;
...
},
가 있어야한다 :
<!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>