Question

I am currently developing using ASP.NET, and I’d like to get started on Knockout JS… Basically what I’ve done is I’ve copy-pasted the code provided in the first tutorial.

So I put this into my head:

<script type="text/javascript">
    function() {
        // This is a simple *viewmodel* - JavaScript that defines the data and
        behavior of your UI

        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");

            this.fullName = ko.computed(function() {
            return this.firstName() + " " + this.lastName();    
        }, this);

        this.capitalizeLastName = function() {
            var currentVal = this.lastName();        // Read the current value
            this.lastName(currentVal.toUpperCase()); // Write back a modified value
        };
    }

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
    }();
</script>

…along with

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script>

In my body I placed

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<p>
    First name: <strong data-bind="text: firstName"></strong>
</p>
<p>
    Last name: <strong data-bind="text: lastName"></strong>
</p>
<p>
    First name:
    <input data-bind="value: firstName" /></p>
<p>
    Last name:
    <input data-bind="value: lastName" /></p>
<p>
    Full name: <strong data-bind="text: fullName"></strong>
</p>
<button data-bind="click: capitalizeLastName">
    Go caps</button>

The code was all taken from Knockout JS’s tutorial, but somehow the values don’t bind themselves automatically–in other words it doesn’t work for me. Am I missing something here?

Answer 1

If you didn’t want to use jQuery, You could also:

1. remove your outer self-executing function
2. put the script referencing knockout view models at the bottom of the body