viewModel 使用挖空.js在原型上计算函数
viewModel computed functions on the prototype using knockout.js
我正在使用 KNOCKOUT.js 库,这有助于数据绑定。所以我不断收到错误,即我的变量未在我们查看模型原型上的计算函数中定义。我知道这是因为计算函数正在将"this"的上下文更改为窗口,但我似乎无法弄清楚如何让它更改回根(viewModel)。我所指的方法在javascript中是"消息"。话虽如此,如何将上下文更改回视图模型?
这是我的代码:
.HTML
p#title.col-xs-12.bg-primary.text-center
| Tic - Tac - Toe!
div.col-xs-3.bg-info
div.bg-primary.controls
span
button.btn.btn-default(data-bind="click:StartMessage.bind($root)")
| New Game
p#message.lead(data-bind="text:Messages.bind($root)()")
table.bg-success(style="table-layout:fixed;")
tr#row1
td(data-bind="click:Messages.bind($root)")
td  
td  
tr#row2
td  
td  
td  
tr#row3
td  
td  
td  
JAVASCRIPT
var message = (function(){
function Message(){
this.main = ko.observable(true);
this.welcome = "Welcome to Tic-Tac-Toe! This is a 2 player game. Click New Game to play!"
this.turn = ", its your turn."
this.win = ", you won!"
this.draw = "It's a draw..."
}
return Message;
})()
var players = (function(){
function Players(){
this.player1 = ko.observable(true);
this.player2 = ko.observable(false);
}
return Players;
})()
var aBox = (function(){
function ABox(){
this.symbol = ko.observable(" ")
}
return ABox;
})()
var viewModel = (function(){
function ViewModel(){
this.GameMessage = new message();
this.thePlayers = new players();
this.r1c1 = new aBox();
this.r1c2 = new aBox();
this.r1c3 = new aBox();
this.r2c1 = new aBox();
this.r2c2 = new aBox();
this.r2c3 = new aBox();
this.r3c1 = new aBox();
this.r3c2 = new aBox();
this.r3c3 = new aBox();
}
/****************************************
************* Messages *****************
****************************************/
ViewModel.prototype.StartMessage = function(){
this.GameMessage.main(false)
}
ViewModel.prototype.Messages = ko.computed(function(){
if(this.GameMessage.main()){
return this.GameMessage.welcome;
}
else if(this.thePlayers.player1()){
this.thePlayers.player1(false);
this.thePlayers.player2(true);
return "Player 1"+this.GameMessage.turn;
}
else if(this.thePlayers.player2())
this.thePlayers.player1(true);
this.thePlayers.player2(false);
return "Player 2"+this.GameMessage.turn;
},ViewModel)
return ViewModel;
})()
ko.applyBindings(new viewModel())
我已经尝试将上下文更改为"viewModel",如图所示,$root和"this"。
如果您想知道该方法试图完成什么,当单击"新消息"按钮时,它将触发显示一条消息。然后,如果单击<td>
,它将在前一条消息的位置显示不同的消息。
ko.computed函数包含第二个参数,该参数允许将计算函数绑定到您指定的任何对象。(它只是使用应用的应用程序的幕后)
因此,当您在原型中定义计算时,您只需将计算绑定到this
,如下所示:
ViewModel.prototype.Messages = ko.computed(function(){
// your function code
}, this);
请记住,当您使用原型时,this
指的是您感兴趣的对象实例。
相关文章:
- 使用“;这个“;JavaScript原型方法中的关键字
- 根据元素和容器大小计算边距
- 从Rally获取一个特定的标记,以便计算另一个字段中的值
- 引用类变量中的原型方法
- 使用D3.js计算带有字母间距的文本长度
- 如何从对象的原型方法访问JavaScript对象属性
- 为什么要包装每一个原型“;类“;JS中具有匿名函数的对象
- 使用CSS或JavaScript计算分页符的数量
- 可以't计算自定义谷歌地图的js
- Node.js中的JavaScript原型对象效率
- 如何计算每个元素's的高度,并将这些值用作函数中的变量
- JavaScript计算帮助(乘以时间)
- 如何计算对象文字中的键
- JavaScript循环无法正确计算/显示结果
- 重载JS'firefox中的对象原型
- viewModel 使用挖空.js在原型上计算函数
- 将通过原型计算的可观察对象添加到构造函数中
- Durandal计算原型方法
- 在Knockout JS中使用揭示原型模式的计算观察对象
- 原型JS-计算剩余宽度