Question

I just started reading, and go through some knokout tutorial, and really like it, but Cannot make a simple sample by myself. Here is HTML code

<input id="Button2" type="button" value="+" data-bind="click:increment" />
<input id="Text1" type="text" data-bind="text:foo" />

and js code:

<script type="text/javascript">
    function AppViewModel() {
        this.foo = ko.observable('0');
        this.increment = function () {
            alert(foo);
            foo += 1;
        };
    }
    ko.applyBindings(new AppViewModel());


</script>

basically i want jsut increment a textbox value by clicking a button. I included in header the following js file as well:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/knockout-2.1.0.debug.js" type="text/javascript">

What else am I missing? Any help would be greatly appreciated

Answer 1

You are using a text binding on an input. Setting the text of an input doesn’t do anything visibly.

You need to use the value binding instead. Like so.

<input id="Button2" type="button" value="+" data-bind="click:increment" />
<input id="Text1" type="text" data-bind="value:foo" />

You also needed to assign the foo element by calling the observable function.

function AppViewModel() {
    var self = this;
    this.foo = ko.observable(0);
    this.increment = function () {
        self.foo(self.foo() + 1);
    };
}

http://jsfiddle.net/madcapnmckay/wdVYe/

Hope this helps.