Data binding script with Knockoutjs not generating data from within view

Question

I am working through a book on MVC, Bootstrap, and Knockoutjs and am having difficulties generating the results I want. This is my first time with knockoutjs and I am still relatively new to coding - in general. Here is what I am trying to accomplish with this tutorial.

I have downloaded the Knockoutjs library and referenced it in my _layout.cshtml file above the @RenderSection("Scripts", false) like this..

    <environment names="Development">    
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
        <script src="~/lib/knockoutjs/dist/knockout.js"></script>
    </environment>
    @RenderSection("Scripts", false)
</body>

I then created a view named Basic.cshtml with the following code

    @{  
    ViewBag.Title = "Basic";
}

<h2>Hello <span data-bind="text: name"></span></h2>

@section Scripts {
<script>
    function ViewModel() {
        this.name = "Not Eric McQuiggan"
    };

    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);
</script>
}

It may be worth noting that Intellisense is not picking up the @section Scripts syntax when I type it.

In theory, this should generate a view when I navigate to XXXX/home/basic using the _layout.cshtml and then pass in the value of the data binding from knockoutjs to show 'Hello Not Eric McQuiggan'. However, on debug, the page only shows the header text ('Hello') and nothing else.

Obviously, this means the script is not running. I have tried to find additional information on anything I may have missed but I am at a dead end. I am sure it will end up being something small, but any help would be appreciated.

Thanks in advance!

I'm not into asp.net but try putting your applyBindings in a document.ready function, I suspect the script was run first but the DOM needed is not yet. This is a common mistake in KnockoutJS. e.g. $(function(){ ko.applyBindings(viewModel); }) — Adrian
– Adrian, Commented Mar 28, 2016 at 2:29
Do you have any errors on console? I think you should have some there. — Dnyanesh
– Dnyanesh, Commented Mar 28, 2016 at 4:46

nemesv · Accepted Answer · 2016-03-28 05:54:06Z

2

ASP.NET Core introduces support for working with multiple environments.

If you don't specify it then the default environment is developmenet.

In your layout you are using the environment tag helper element which only writes its content to the output if you are using the matching environment.

So in development mode your HTML will look like this:

<environment names="Development">    
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<!-- this is not included in the outputted HTML when in development mode -->
<!-- <environment names="Staging,Production">
    ...
</environment> -->
@RenderSection("Scripts", false)

So Kncokout is not loaded in this case, and you should see a ko is undefined error in your browsers's console.

The fix is very easy, you need to include the Knockout reference also in the development scripts section:

<environment names="Development">    
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/lib/knockoutjs/dist/knockout.js"></script>
</environment>

Note: you should make sure that you have knockout.js in the correct location and ASP.NET Core is configured to server the file from that location.

answered Mar 28, 2016 at 5:54

nemesv

140k16 gold badges424 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Swatzell Over a year ago

Thanks for this! I knew it had to be something small about the placement of the reference but wasn't sure where to go.

Collectives™ on Stack Overflow

Data binding script with Knockoutjs not generating data from within view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related