来自tockout.js视图模型的文本未显示在HTML中

Question

I'm woking with MVC 4 playing around with Knockout for the front end architecture. I currently have the following script on my front end...

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

<script type="text/javascript">

    // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    function AppViewModel() {
        this.merchantName = ko.observable("Store");
    }

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());

</script>



<p>Merchant name: <strong data-bind="text: merchantName"></strong></p>

The problem is that the data for the merchantName attribute isn't showing in the HTML. I run the same code on in the Knockout tutorial page http://learn.knockoutjs.com/#/?tutorial=intro and everything works fine. What do you think could be the issue. Also, I'm relatively new at front end development. What is the best way to debug knockout problems other than chrome debugger?

Thanks!

Answer 1

You can use either of the below 2 for ko.applyBindings :

1. Add at the top of DOM with document.onload check
2. At the bottom after DOM is loaded with out any check

From Documentation: http://knockoutjs.com/documentation/observables.html

You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery’s $ function.

Answer 2

Use knockout.js only after your DOM is already loaded. In your example just put

<p>Merchant name: <strong data-bind="text: merchantName"></strong></p>

to the top of your file.

Also notice, that putting javascript right before </body> is closed is good practice in most cases