Question

我正在编写一个基本的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>

即使收藏夹设置为初始化为足球，当页面启动时，选择Cricket，而不是足球。关于为什么以及如何设置默认选定值的任何想法？

小提琴：http://jsfiddle.net/4jb43sr9/

Answer 1

这是因为您在点击装订中调用了函数setFavourite。

因此，当knockout将视图模型绑定到视图时，实际上使用您在每个列表项中指定的参数调用setFavourite。因为＆＃39; setFavourite（＆＃39; Cricket＆＃39;）＆＃39;是最后一个出现在视图中的，它也是被调用的最后一个函数，这就是选择板球的原因。

这里有两个选项：

选项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>

您的fiddle已更新为选项1。

或

选项2

不对视图进行任何更改，并从setFavourite返回一个函数：

   self.setFavourite = function (fav) {
        return function () {
            self.Favourite(fav);
        }
    };

使用选项2更新

fiddle。

为什么我的淘汰视图模型初始化为不同的值？

1 个答案: