Can't get up and running

[JoeWaltman]

I have completed most of the tutorials and read the documentation and
am now attempting to experiment with a 'live' knockout.js application/
page.

To keep things simple, I've simply copied the Hello World example
(http://knockoutjs.com/examples/helloWorld.html). I've got a main html
file that includes the examples HTML:

<script type='text/javascript' src='knockout-2.0.0.js'></script>
<script type='text/javascript' src='helper.js'></script>


<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

I then have a 'helper.js' file that contains the View Model code:
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);

this.fullName = ko.computed(function() {
// Knockout tracks dependencies automatically. It knows that
fullName depends on firstName and lastName, because these get called
when evaluating fullName.
return this.firstName() + " " + this.lastName();
}, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes
Knockout get to work

Unfortunately, I am still unable to get this to work. Looking at
firebug, I can see that the two .js files are visible to the browser.
I am stumped!

Thanks in advance.

[rpn]

You will not want to call ko.applyBindings too soon.  You can either move your helper.js script to the bottom of your page or call ko.applyBindings in onload or something like jQuery's ready function. 

[JoeWaltman]

Thanks for the help.

I moved the helper.js script to the bottom of the html page and
wrapped the ko.applyBindings call in a jQuery ready function and still
no luck. For what it is worth, I am serving this locally from my own
machine. Any input would be greatly appreciated.

Here is the new code.

HTML file:

<script type='text/javascript' src='knockout-2.0.0.js'></script>

<script type='text/javascript' src='jquery.js'></script>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

<script type='text/javascript' src='helper.js'></script>

helper.js file:

var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);

this.fullName = ko.computed(function() {
// Knockout tracks dependencies automatically. It knows that
fullName depends on firstName and lastName, because these get called
when evaluating fullName.
return this.firstName() + " " + this.lastName();
}, this);
};

$(function() {

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes
Knockout get to work

});

[mjmeintjes]

I've seen that Knockout (and Javascript in general) sometimes
struggles if you run it locally from your machine without a web
server.

I would recommend using a simple webserver to serve your files from
localhost.

If you have python installed, it is as simple as navigating to the
directory with your files and typing "python -m SimpleHTTPServer".
This will start a webserver serving the current directory at localhost:
8000.

Regards
Matthys Meintjes

[rpn]

I would make sure that the scripts are being loaded.  Maybe throw a console.log or alert next to applyBindings and verify that it is executing the code.

[JoeWaltman]

Thanks again for all the help...this is a really frustrating one.

I started serving the files locally using the SimpleHTTPServer and
added a console.log statement (which gets thrown sometimes), but still
no luck with the bindings and such. I then decided to upload the files
to a hosted facility (http://www.claven.com/dice/dicegame.html) and am
still getting no love.

Any idea what might be going wrong?

[ricochet1k]

Your knockout-2.0.0.js file appears to have not downloaded correctly.
It terminates in the middle of a string and a function. Try
downloading it again.

[JoeWaltman]

Bingo! Thanks a bunch!