ASP.NET MVC4 and Knockout js

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

Have you tried putting the applyBindings call in document ready? It can fail if the HTML doesn't exist yet. — Kyeotic
– Kyeotic, Commented Jan 16, 2013 at 0:15
I updated the code and tried to call in document ready but it still didnt work. — reggieboyYEAH
– reggieboyYEAH, Commented Jan 16, 2013 at 1:02
Well it works in this fiddle, something else on your page must be going wrong. Do you get any errors in the console? — Kyeotic
– Kyeotic, Commented Jan 16, 2013 at 1:38

Joel Cochran · Accepted Answer · 2013-01-16 11:54:23Z

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>
}

Gent · Accepted Answer · 2013-01-16 02:30:00Z

0

try putting knockout in the of your document. Without any error messages the only thing I can say is I ran into a similar problem and that was the fix for me.

My example was driving me crazy because it worked in fiddle but not in MVC, I mentioned it to a designer friend of mine and he said it made since to him, basically that knockout needed to be fully downloaded before the page began to render.

Hope this helps

answered Jan 16, 2013 at 2:30

Gent

2,6851 gold badge24 silver badges34 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC4 and Knockout js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related