Question

about nested dom bindings

http://jsfiddle.net/sxd1140/XWvYk/1/

is only this way

https://github.com/hunterloftis/knockout.namespaces

or have other way to solve

Answer 1

The namespace plug-in is probably the best solution, if you need to have multiple view models that are intermingled.

The typical answer though is to have a main view model with sub-view models off of it and bind to the main one. Like:

var viewModel = {
    body: {
        click: function() { alert("body"); }  
    },
    div: {
        click: function() { alert("body"); }  
    }
};

ko.applyBindings(viewModel);

Now, you would have to bind your clicks to body.click and div.click.

A typical pattern would be to do something like this:

var viewModel = {
  body: ko.observable(),
  div: ko.observable()
};

Now, you would use the template binding, which will not render anything if the observable is null and will allow you to specify click directly instead of div.click, as you would pass the view model as the data parameter of the template binding. Then, the UI will update if/when the sub-view models are populated (maybe via AJAX). Bindings would be something like:

<div data-bind="template: { name: 'main', data: body, templateOptions: { div: div } }"></div>

<script id="main" type="text/html">
    <button data-bind="click: click">body</button>
    <div id="a" data-bind="template: { name: 'div', data: $item.div }"></div>
</script>  

<script id="div" type="text/html">
    <button data-bind="click: click">div</button>
</script>

The “div” view model is passed to the nested template using templateOptions to show that you would not need to rely on viewModel having global scope (don’t need to access viewModel.div from within the nested template).

Sample here: http://jsfiddle.net/rniemeyer/7ZsGK/