Question

I am trying to use knockout js in my project so I tried the simple Hello World example but i couldnt get it to work. I created a new MVC4 project and just copy do a simple binding below is my code

<script src="~/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">

    // Here's my data model
    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);
    };

    $(document).ready(function() {
        ko.applyBindings(new viewModel("Planet", "Earth")); // This makes Knockout get to work
    });​
</script>

<div class="liveExample">   
    <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>*@  
</div>

Basically it will just display the value of the model on a textbox.
I already referenced the knockout.js in my project but it does not work
I also added the knockout js in my BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/knockout").Include("~/Scripts/knockout-2.1.0.js"));

I didnt work

Answer 1

If you are using MVC, use the scripts section to declare your JS. This will move the declarations to the bottom of the HTML page, letting the HTML render first. Here’s my version of your code that worked first time out of the box:

@{
    ViewBag.Title = "Index";
}


<h2>Index</h2>

<div class="liveExample">
    <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>*@
</div>

@section scripts {
    <script src="~/Scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript">
    var viewModel = function (firstName, lastName) {
        this.firstName = ko.observable(firstName);
        this.lastName = ko.observable(lastName);
    };

    $(function () {
        ko.applyBindings(new viewModel("Planet", "Earth"));
    });
    </script>
}