Knockout examples of debugging in a view

A similar error is often encountered in the use of knockout development: uncaught referenceerror:unable to process binding "text:function () {return title}". When the model is relatively simple, we can easily find problems, generally as long as the correct error in the title in the $root, $parent, $data the three objects. If you use the knockout component, the problem becomes more complicated. For example:

View:

<div data-bind= "Text:title" ></div>
<div data-bind= "Component:componentname" ></div>
<script type= "text/html" id= "TPL" >
<ul data-bind= "Foreach:list" >
<li data-bind= "Text:name" ></li>
</ul>
</script>

Model:

var viewmodel1 = function () {
This.title = ko.observable ("Shrimp Tiger fish");
This.componentname = "Component-name";
}

var viewmodel2 = function () {
This.list = Ko.observablearray ([{name: "a"},{name: "B"}]);
}

Ko.components.register ("Component-name", {
Viewmodel:viewmodel2,
Template:document.getElementById ("TPL"). InnerHTML
});

Ko.applybindings (new Viewmodel1);

If you want to get the data in Viewmodel1 and Viewmodel2 in the <li data-bind= "Text:name" ></li>, how do you write? Back to the point, how to debug in the view of the knockout, can debug JS in the view of the above problems are easily resolved. In the HTML of the data-bind belongs to the attribute, not JS, so can not through the interrupt point to debug, then only through debugger to debug, so we can <li data-bind= "Text:name" ></li To make some changes, when the foreach to Text:name first executes the name of this expression, after the execution of the resulting text into the element, then we do a little modification of this expression:

<li data-bind= "Text: (function () {debugger}) ()" ></li>

When executing to Li, the right expression is executed first (function () {debugger}), and when executed, the breakpoint is debugger, as shown:

All objects are in the $content, which can also detect $root, $parent, $parents, $data, $index, and so on, where $parents contains Viewmodel1 and Viewmodel2.
The above is found in the work of the debugging knockout in the view of a skill (Shrimp Tiger fish original), in the development of useful or quite large.