two way binding not working in knockout.js

Question

I am trying to update the UI after chages to viewModel but it doesn't work , am I missing something ? http://jsfiddle.net/rdZjb/1/

  viewModel = {
        firstName : ko.observable("adrian") 
    }

    $("#button1").click(
        function ()
        {
            viewModel.firstName = "Paul";
            alert(viewModel.firstName);
        }
        )

    ko.applyBindings(viewModel);

Answer 1

You are working with observables in wrong way. Each observable is a function so when you setting or geting value you should use ():

        viewModel.firstName("Paul");
        alert(viewModel.firstName());

Also it is bad practice to use jQuery click event. Use knockout click binding instead:

<input type="button" value ="click" id="button1" data-bind="click: OnClick"/>

viewModel = {
    firstName: ko.observable("adrian"),
    OnClick: function() {
        this.firstName("Paul");
        alert(this.firstName());
    }
};

Here is working fiddle: http://jsfiddle.net/vyshniakov/rdZjb/2/

Answer 2

To change an observable (after initializing it) via Javascript, you need to call it as a function such as

viewModel.firstName("Paul");