Rookie starting knokout questions

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

score 1 · Accepted Answer · answered May 29 '12 at 21:58

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.

answered May 29 '12 at 21:58

madcapnmckay

15,782
6
61
78

Great I checked in jsfiddle, but cannot make it to work on my application. beside Jquery, adn knokout Which external js file should I include on my page? thanks again for yuor help – Frenchi In LA May 29 '12 at 22:26
That's all you need. What errors does the firebug/chrome dev tools console show you? – madcapnmckay May 29 '12 at 22:37
No error, but it does nothing. Even at load the textbox value is not 0, the page is a aspx. it shouldn't be a problem – Frenchi In LA May 29 '12 at 22:46
Can you add a breakpoint on your applyBindings and verify it's being called. – madcapnmckay May 29 '12 at 23:38

Rookie starting knokout questions

1 Answers1