javascript - knockout JS : How to avoid running a viewmodel function on applyBindings?

Question

我对自己拼凑的一些代码感到有些困惑，这些代码的行为并不像我预期的那样。

我确定我做错了什么(考虑到这里已经很晚了，这可能很简单)，但我想弄清楚为什么会这样。

我正在使用:

• jQuery 1.10.2
• knockout 2.3.0
• Bootstrap 3.0.3

问题

• 我在我的 ViewModel 中定义了一个函数，它将一个 observable 设置为某个值。
  • 我的代码中没有从其他任何地方调用它。
• 我在属于按钮组的按钮上定义了一个 data-bind="click: AddAnnouncement" 绑定(bind)。
• 当 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?
});

我的绑定(bind)代码也很初级(我认为):

<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 绑定(bind)模型的方式，但似乎在应用绑定(bind)时，knockout 执行所有功能，甚至是点击绑定(bind)。但是，这对我来说没有意义，所以我敢打赌我错了。

有人开导我吗？谢谢!

Answer 1

糟糕!结果这个问题的答案就在我眼皮子底下；事实上，我所要做的就是在看到它之前写下整个该死的问题。 :)

问题出在我的绑定(bind)上:

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

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

当 knockout 分配其绑定(bind)时，它通过直接引用您输入的内容来实现。由于我输入了 AddAnnouncement()，它将绑定(bind)分配给已运行一次的函数的输出，而不是将在稍后执行的函数本身。

最好的方法是使用 AddAnnouncment，没有 paranetheses，就像这样:

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

这不会在应用绑定(bind)时执行函数。

虽然我忘了避免这样一个简单的错误，但我希望它能在以后节省其他人的时间。可以在 http://jsfiddle.net/SeanKilleen/v8ReS/4/ 找到可用的 JSFiddle。 .