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

Posted 2023-03-27

【中文标题】为啥我的淘汰视图模型使用不同的值初始化？

【英文标题】：Why does my knockout view model initialise with a different value?为什么我的淘汰视图模型使用不同的值初始化？

【发布时间】：2016-01-09 15:11:23

【问题描述】：

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

【参考方案1】：

这是因为您在点击绑定中调用了函数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>

这是您的 fiddle 更新选项 1。

或

选项 2

不更改您的视图并从setFavourite返回一个函数：

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

fiddle 已更新选项 2。

【讨论】：

谢谢。这是通过设计调用绑定行为的函数还是javascript的结果？

@JonathanTwite 这是设计使然。这允许您将函数绑定到单击绑定，而不是函数的结果。当你绑定一个函数时，敲除将上下文作为参数传递给绑定的函数。