javascript - Knockout binding not updating - Stack Overflow

admin管理员组

文章数量:1406000

My knockout binding is not updating. I have a field that I have set as

this.firstName = ko.observable("Bert");

When I call:

AppViewModel.firstName(name);

I need it to update. Here is a jsfiddle:

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());

// When I click button I want the name to change
$('input[type=button]').click( function() {
    var name = 'New Name';
    AppViewModel.firstName(name);
});    

/

My knockout binding is not updating. I have a field that I have set as

this.firstName = ko.observable("Bert");

When I call:

AppViewModel.firstName(name);

I need it to update. Here is a jsfiddle:

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());

// When I click button I want the name to change
$('input[type=button]').click( function() {
    var name = 'New Name';
    AppViewModel.firstName(name);
});    

http://jsfiddle/d577K/38/

• javascript
• knockout.js

Share Improve this question Follow edited Mar 20, 2016 at 19:12 Paolo 21.2k2121 gold badges7676 silver badges122122 bronze badges asked Mar 22, 2013 at 1:49 ipengineeripengineer 3,30788 gold badges3535 silver badges3838 bronze badges 4

• are you sure thats the right fiddle? Doesn't seem to have any of your code in it... – Ben McCormick Commented Mar 22, 2013 at 1:51
• also can we see your html markup? – Ben McCormick Commented Mar 22, 2013 at 1:51
• Just updated it. The HTML is there sorry.. – ipengineer Commented Mar 22, 2013 at 1:52
• yeah I figured it out, you were just using an older version of the fiddle. no problem – Ben McCormick Commented Mar 22, 2013 at 1:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You're referencing the AppViewModel class instead of the actual object... try instantiating the view model before binding with knockout, then reference the instance:

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}
var vm = new AppViewModel();
// Activates knockout.js
ko.applyBindings(vm);

//When I click button I want the name to change
$('input[type=button]').click( function() {
var name = 'New Name';
vm.firstName(name);

});

Here's the fiddle: http://jsfiddle/d577K/178/

When you write

new AppViewModel()

you're creating a new AppViewModel object. However you never save a reference to that object.

when you try to update AppViewModel.firstName(name);, AppViewModel is your constructor function and you're calling a method that doesn't exist on the constructor function. You need to create your object as a variable and then reference it.

var app = new AppViewModel();

...

app.firstName(name);

Here's an update to your fiddle, its working now.

Any reason to keep the name update function outside of the model?

How about this: http://jsfiddle/dvdrom000/d577K/41/

html update

<input type="button" value="test" data-bind="click: NewName" />

js

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

    this.NewName = function(){
        this.lastName("New name");
    }
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());

本文标签： javascriptKnockout binding not updatingStack Overflow