KnockoutJS:如何避免在applyBindings上运行viewmodel函数？

Question

我对有些代码感到有点困惑,这些代码我没有像我期望的那样表现得很好.

我确定我做错了什么(考虑到这里的时间很晚,这可能是一件简单的事情),但我正在寻找一些明确的原因.

我正在使用:

• jQuery 1.10.2
• 淘汰赛2.3.0
• Bootstrap 3.0.3

问题

• 我在我的ViewModel中定义了一个函数,它将一个observable设置为某个值.
  • 这不是从我的代码中的任何其他地方调用的.
• 我data-bind="click: AddAnnouncement"在一个按钮组的按钮上定义了一个绑定.
• 当ko.applyBindings(vm)被调用时,AddAnnouncement函数会触发,在我点击任何内容之前很久就会给我一个不希望的结果.

问题代码

可以在JSFiddle中找到:http://jsfiddle.net/SeanKilleen/v8ReS/.

基本上,我有以下JavaScript代码:

var MyNamespace = MyNamespace || {

    ViewModel: function(){
        'use strict';
        var self = this;

        self.AddingAnnouncement = ko.observable(false);

        self.AddAnnouncement = function(){
            self.AddingAnnouncement(true); 
        };

        self.Start = function(){
            self.AddingAnnouncement(false);
        };

        self.Start();
    }
};

var vm;

$(document).ready(function(){
'use strict';

vm = new MyNamespace.ViewModel();

 ko.applyBindings(vm); 
    //do something with jQuery? Bind a VM?
});

我的绑定代码也很基本(我想):

<div class="container">
    <div class="row">
        <div class="btn-group">
            <button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement()">A</abbr>

            </button>
        </div>
    </div>
    <div class="row" data-bind="visible: AddingAnnouncement() == true">
            <h1>Add a new announcement</h1>

    </div>
</div>

我认为它在做什么

我认为有问题的代码正在执行以下操作:

• 定义一个名为的命名空间MyNamespace(虽然可能不是最好的方式;这可能是问题的一部分？)
• ViewModel在命名空间内定义对象
• 为ViewModel对象提供一个可观察的被调用AddingAnnouncment函数和一个被调用的函数AddAnnouncement,该函数设置AddingAnnouncement为true.
• 定义一个Start方法,确保AddingAnnouncement默认设置为false;
• 调用该Start方法作为其初始化的最后一步.

我在这里想念的是什么？

我认为我没有掌握JavaScript的某些标准行为或类似于敲除绑定模型的方式,但似乎在应用绑定时,knockout执行所有函数,即使对于单击绑定也是如此.但是,这对我来说没有意义,所以我打赌我错了.

有人开导我吗？谢谢!

Answer 1

Whooops!这个问题的答案结果证明是在我的鼻子底下; 事实上,我所要做的就是在看到它之前写出完整的问题.:)

问题在于我的绑定:

<button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement()">A</abbr>

注意一个非常重要的区别:AddAnnouncement().()在这种情况下,事情很重要.

当knockout分配它的绑定时,它通过直接引用你输入的内容来实现.自从我输入以来AddAnnouncement(),它将绑定分配给已经运行一次的函数的输出,而不是将在稍后执行的函数本身.

做到这一点的最好方法就是使用这样的方式,不使用AddAnnouncmentparanetheses:

<button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement">A</abbr>

这不会在应用绑定时执行该功能.

虽然我忘了避免这么简单的错误,但我希望将来可以节省别人的时间.工作的JSFiddle可以在http://jsfiddle.net/SeanKilleen/v8ReS/4/找到.