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

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

欢迎
名字
姓


这是因为您正在单击绑定中调用函数
setfavorite

因此，当knockout将视图模型绑定到视图时，实际上正在使用您在每个列表项中指定的参数调用
setfavorite
。因为“SetFavorite（'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>

更新了选项2。
谢谢。这是按设计调用绑定行为函数还是javascript的结果？@JonathanTwite这是按设计调用的。这允许您将函数绑定到单击绑定，而不是函数的结果。绑定函数时，knockout将上下文作为参数传递给绑定函数。
   self.setFavourite = function (fav) {
        return function () {
            self.Favourite(fav);
        }
    };