Menu
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.
525
The input tag should be bound to name as a value instead of a text
e.g
Name:<input data-bind="value: name"></input>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
