CODEWITHSUNDEEP
javascriptfirebugknockout.js
Ingó Vals
Ingó Vals

Reputation: 4898

Knockout text binding not working for input

As a total beginner with Javascripts I decided to try out Knockout starting very simple and going more advanced. I however couldn't even manage to get it to work in a very simple scenario.

I'm guessing the problem is something very simple and I'm kind of embarrassed to be asking this here. But I'm not good at debugging Javascript and do not know how bugs might manifest so here goes.

This is the html source of the page after it's been generated by asp.net MVC 3 :

<html>

<head>
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>

<body>

<h2>Index</h2>

<script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
<script src="/Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>

<script type="text/javascript">

    var viewModel = {
        name: "Joe",
        number: "13"
    };

</script>

<script type="text/javascript">
    ko.applyBindings(viewModel);
</script>

<ul>
<li>Name: <input data-bind="text: name"/></li>
<li>Number: <input data-bind="text: number"/></li>
</ul>

<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>

</body>
</html>

Joe or 13 does not get bound to the input or textbox.

Tried putting it in a ko.observable() but also deos not work. It's just like the script isn't running.

Tried debugging using FireBug and I can see the applyBinding is executed and the viewModel object does include the correct variables.

It's probably something obvious that is going on here. If you can't see it here then could you point out what I should look for when using FireBug?

EDIT

After trying several combinations of the solutions given I'm still having problems. With one solution the HTML looks like this:

<html>
<head>

    <title>Index</title>

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
    <script type="text/javascript">
            var viewModel = {
                name: ko.observable("Joe"),
                number: ko.observable("13")
            };
    </script>

    <script type="text/javascript">
        $(function () { ko.applyBindings(viewModel); })
    </script>

</head>

<body>
<h2>Index</h2>

<ul>
<li>Name: <input data-bind="text: name"></input></li>
<li>Number: <input data-bind="text: number"></input></li>
</ul>

<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>

</body>
</html>

Doesn't seem to matter which applyBindings solution I use they all work the same.

So the binding finally works but only on IE and Firefox but not on Chrome. Also the observable doesn't work at all. I can't update the fields by writing into the input field.

Upvotes: 4

Views: 11979

Answers (4)

vannara
vannara

Reputation: 21

The script should be written below the binding control:

<div>Today's message is: <span data-bind="text: myMessage"></span></div><script type="text/javascript">
var viewModel = {
    myMessage: "Hello"
};
ko.applyBindings(viewModel);</script>

Upvotes: 0

Stjani
Stjani

Reputation: 126

The input tag should be bound to name as a value instead of a text

e.g

Name:<input data-bind="value: name"></input>

Upvotes: 11

Mark Robinson
Mark Robinson

Reputation: 13278

Try:

<script type="text/javascript">
$(function () {


    var viewModel = { 
        name: "Joe", 
        number: "13" 
    }; 

    ko.applyBindings(viewModel); 
});
</script>

.. and make name and number observable if you want two way binding (ie. model gets updated when user types into input box)

Upvotes: 2

bert bruynooghe
bert bruynooghe

Reputation: 3093

applyBindings has to be executed after the html is completely loaded. Normally, I call it from the jquery.ready method, but I guess it will also work if you put the script block containing the applyBindings after the html tags that need binding.

Upvotes: 9

Related Questions