javascript - KnockoutJS: How to avoid running a viewmodel function on applyBindings? - Stack Overflow

admin管理员组

文章数量:1431398

I'm a little puzzled by some code I plunked together that doesn't behave quite as I'd expect.

I'm sure I'm doing something wrong (and given the late hour here, it might be something simple), but I'm looking for some clarity on why this happens.

I'm using:

• jQuery 1.10.2
• Knockout 2.3.0
• Bootstrap 3.0.3

The Problem

• I define a function in my ViewModel, which sets an observable to a certain value.
  • This is not called from anywhere else in my code.
• I define a data-bind="click: AddAnnouncement" binding on a button that's part of a button group.
• When ko.applyBindings(vm) is called, the AddAnnouncement function fires, giving me an undesired result long before I click on anything.

The Code in Question

Can be found in a JSFiddle at: /.

Essentially, I have the following JavaScript code:

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?
});

My binding code is also pretty elementary (I thought):

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

What I think it's doing

I think the code in question is doing the following:

• Defining a namespace called MyNamespace (albeit probably not in the best way; this may be part of the problem?)
• Defining a ViewModel object inside the namespace
• Giving the ViewModel object an observable called AddingAnnouncment and a function called AddAnnouncement, which sets AddingAnnouncement to true.
• Defines a Start method which ensures that AddingAnnouncement is set to false by default;
• Calls the Start method as the last step in its initialization.

What am I Missing Here?

I think I'm not grasping some standard behavior of JavaScript or something about the way knockout binds models, but it seems like when applying the bindings, knockout executes all of the functions, even for the click bindings. However, that doesn't make sense to me and so I'm betting I'm wrong.

Someone enlighten me? Thanks!

I'm a little puzzled by some code I plunked together that doesn't behave quite as I'd expect.

I'm sure I'm doing something wrong (and given the late hour here, it might be something simple), but I'm looking for some clarity on why this happens.

I'm using:

• jQuery 1.10.2
• Knockout 2.3.0
• Bootstrap 3.0.3

The Problem

• I define a function in my ViewModel, which sets an observable to a certain value.
  • This is not called from anywhere else in my code.
• I define a data-bind="click: AddAnnouncement" binding on a button that's part of a button group.
• When ko.applyBindings(vm) is called, the AddAnnouncement function fires, giving me an undesired result long before I click on anything.

The Code in Question

Can be found in a JSFiddle at: http://jsfiddle/SeanKilleen/v8ReS/.

Essentially, I have the following JavaScript code:

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?
});

My binding code is also pretty elementary (I thought):

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

What I think it's doing

I think the code in question is doing the following:

• Defining a namespace called MyNamespace (albeit probably not in the best way; this may be part of the problem?)
• Defining a ViewModel object inside the namespace
• Giving the ViewModel object an observable called AddingAnnouncment and a function called AddAnnouncement, which sets AddingAnnouncement to true.
• Defines a Start method which ensures that AddingAnnouncement is set to false by default;
• Calls the Start method as the last step in its initialization.

What am I Missing Here?

I think I'm not grasping some standard behavior of JavaScript or something about the way knockout binds models, but it seems like when applying the bindings, knockout executes all of the functions, even for the click bindings. However, that doesn't make sense to me and so I'm betting I'm wrong.

Someone enlighten me? Thanks!

• javascript
• knockout.js

Share Improve this question Follow asked Dec 9, 2013 at 5:59 SeanKilleenSeanKilleen 8,9771818 gold badges8585 silver badges139139 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Whooops! The answer to that question turned out to be right under my nose; indeed, all I had to do was write that entire darn question before I saw it. :)

The problem is with my binding:

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

Note a very important distinction: AddAnnouncement(). The () matters quite a bit in this case.

When knockout assigns its binding, it does so by directly referencing what you enter. Since I entered AddAnnouncement(), it assigned the binding to the output of the function that had been run once, rather than the function itself which would be executed at a later time.

The best way to do it would have been to use AddAnnouncment, without paranetheses, like this:

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

This does not execute the function upon applying bindings.

While I forgot to avoid such a simple mistake, I hope it saves someone else time in the future. The working JSFiddle can be found at http://jsfiddle/SeanKilleen/v8ReS/4/.

We usually confuse when to use parentheses () when we bind View with ViewModel.

As when you bind AddAnnouncement function, you directly bind with function call like AddAnnouncement(). That why the AddAnnouncement function call when you bind using ko.applyBindings even though we didn't click the button, the function call already fire.

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

so we change as below

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

working jsfiddle

本文标签： javascriptKnockoutJS How to avoid running a viewmodel function on applyBindingsStack Overflow