我正在编写一个基本的基因敲除（knockout.js）网页，以学习如何使用它。视图模型中的值设置为保存某人喜欢的运动，而html的其他部分会对所选值做出反应。我有以下ViewModel：
function ViewModel() {
var self = this;
self.firstName = ko.observable('Andy');
self.lastName = ko.observable('Blowers');
self.fullName = ko.computed(function () { return self.firstName() + " " + self.lastName(); });
self.setFavourite = function (fav) { self.Favourite(fav); };
self.Favourite = ko.observable("Football");
};
// Activate knockout.js
var vm = new ViewModel();
ko.applyBindings(vm);
和以下html：
<div>
<h1>Welcome <span data-bind="text: fullName"></span></h1>
</div>
<div>
<div class="form-group">
<label class="control-label">First Name</label>
<input class="form-control" type="text" id="txtFirstName" data-bind="value: firstName" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input class="form-control" type="text" id="txtLastName" data-bind="value: lastName" />
</div>
</div>
<div>
<div class="form-group">
<ul class="nav nav-btns">
<li role="presentation" data-bind="css: { active: Favourite() == 'Football' }">
<a id="btnFootball" data-bind="click: setFavourite('Football')">Football</a>
</li>
<li role="presentation" data-bind="css: { active: Favourite() == 'Rugby' }">
<a id="btnRugby" data-bind="click: setFavourite('Rugby')">Rugby</a>
</li>
<li role="presentation" data-bind="css: { active: Favourite() == 'Cricket' }">
<a id="btnCricket" data-bind="click: setFavourite('Cricket')">Cricket</a>
</li>
</ul>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default" data-bind="visible: Favourite()=='Football'">
<div class="panel-heading">
<h3 class="panel-title">Football</h3>
</div>
<div class="panel-body">
<p>I prefer football</p>
</div>
</div>
<div class="panel panel-default" data-bind="visible: Favourite()=='Rugby'">
<div class="panel-heading">
<h3 class="panel-title">Rugby</h3>
</div>
<div class="panel-body">
<p>I prefer rugby</p>
</div>
</div>
<div class="panel panel-default" data-bind="visible: Favourite()=='Cricket'">
<div class="panel-heading">
<h3 class="panel-title">Cricket</h3>
</div>
<div class="panel-body">
<p>I prefer cricket</p>
</div>
</div>
</div>
即使将“收藏夹”设置为初始化为“足球”，当页面启动时，也会选择“板球”，而不是“足球”。关于为什么以及如何设置默认选定值的任何想法？
小提琴：http : //jsfiddle.net/4jb43sr9/
这是因为您正在setFavourite单击绑定中调用该函数。
所以，setFavourite实际上是被称为与你在淘汰赛时，你的绑定视图模型到视图中的每个列表项中指定的参数。因为'setFavourite（'Cricket'）'是视图中最后一个出现的函数，所以它也是最后一个被调用的函数，这就是选择cricket的原因。
您在这里有两个选择：
选项1
将这些函数调用包装在您的单击绑定中的匿名函数中：
<ul class="nav nav-btns">
<li role="presentation" data-bind="css: { active: Favourite() == 'Football' }">
<a id="btnFootball" data-bind="click: function(){ setFavourite('Football') }">Football</a>
</li>
<li role="presentation" data-bind="css: { active: Favourite() == 'Rugby' }">
<a id="btnRugby" data-bind="click: function(){ setFavourite('Rugby') }">Rugby</a>
</li>
<li role="presentation" data-bind="css: { active: Favourite() == 'Cricket' }">
<a id="btnCricket" data-bind="click: function(){ setFavourite('Cricket')}">Cricket</a>
</li>
</ul>
这是您使用选项1更新的小提琴。
或者
选项2
不更改视图并从中返回一个函数setFavourite：
self.setFavourite = function (fav) {
return function () {
self.Favourite(fav);
}
};
小提琴更新了选项2。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句