KO binding is not working in VS 2012

Question

I have just started learning KO. After creating a MVC4 project in VS 2012, I have just entered two text boxes in the view & expected to see the values getting reflected there, but its not working. Please help me fixing the defect in it...

The cshtml code is looks something like this...

NB : I have verified the KO path & version & found its correctly included.

@{
    Layout = null;
}

    @section scripts{




  <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.20.js"></script>
   <script src="~/Scripts/knockout-2.1.0.js"></script>



    <script type="text/javascript">

        $(function () {
            var MyViewModel = {
                name: ko.observable("Steve"),

                changeName : function () {
                    this.name("Scott");
                }              
            };
            ko.applyBindings(MyViewModel);
        });       

    </script>
    }



<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
</head>
<body>
    <div>
        Name : <input type="text" data-bind="value: name  " />

        <p>
            Hello, <span data-bind="text: name "></span>
        </p>
        <button data-bind="click: changeName">Change Name</button>

    </div>
</body>
</html>

You can included knockout **twice** remove the unnecessary second reference! — nemesv, Mar 02 '14 at 06:20
your code is perfectly right. just remove extra ko reference and check whether jquery is loaded or not. — Akhlesh, Mar 02 '14 at 06:25
I have removed that second reference, but still the same problem persists. Also the intellisense (in VS 2012 editor) for KO is coming, so it seems it is properly included. — Biki, Mar 02 '14 at 06:26
There is also a typo in your code: `ChangeName` should be `changeName` because you using it that name in your binding ` — nemesv, Mar 02 '14 at 06:34
I ve included the jquery bfr KO & changed the typo, but still its the same issue. — Biki, Mar 02 '14 at 06:36
@akhlesh : Thanks, now its started working. Just wondering why Script section is creating the problem? Where should we use that section? — Biki, Mar 02 '14 at 06:44
see this link for more info about @section [http://stackoverflow.com/questions/13089489/asp-net-mvc-explanation-of-section](http://stackoverflow.com/questions/13089489/asp-net-mvc-explanation-of-section) — Akhlesh, Mar 02 '14 at 06:45
above url is not working, kindly check any typo & paste it again... — Biki, Mar 02 '14 at 06:48
http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx is MVC 3, but this is still the same for mvc 4 and 5 — davethecoder, Mar 02 '14 at 23:13
The `@section` declares a inline template that a master layout page uses when it needs to insert content. You aren't using a layout page, so nothing inserts the content of `@scripts` into the HTML. Move all 4 script elements to just above the close body tag, or use a master layout page — Robert Slaney, Mar 04 '14 at 02:18

score 0 · Answer 1 · answered Mar 14 '14 at 14:09

@Section Scripts block was creating the problem.

Removing that label from the above page solved the problem.

@{
    Layout = null;
}

<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/knockout-2.1.0.js"></script>


<script type="text/javascript">

    $(document).ready(function () {

... ...

KO binding is not working in VS 2012

1 Answers1