使用敲除js中的observable属性更新UI

Question

I want to update UI when changes the observable property of view model.

ViewModel is:

 function UserViewModel() {
        var self = this;       
        self.name = ko.observable("Test User")
    }

Declaring object and updating observable property on button clicks

 var userViewModel = {};
        $("#button").click(funtion(){
          userViewModel.name("Test");
        })

Apply binding on view model

$(funtion(){
            userViewModel = new UserViewModel();
            ko.applyBindings(userViewModel); 
})

and View is

<span data-bind="text:name"></span>

or

<span data-bind="text:name()"></span>

Thanks, Please suggest.

Answer 1

You're on the right track, but I would recommend handling the click with a knockout binding, instead of using jQuery.

function UserViewModel() {
    var self = this;
    self.name = ko.observable("Test User");
    self.update = function() {
        self.name("Test");
    };    
}

ko.applyBindings(new UserViewModel());


<span data-bind="text:name"></span>
<button data-bind="click: update">Update</button>

Here is a fiddle