Knockout binding for onsenui tabbar

Question

I'm using onsen UI with knockoutJS. Page navigation and binding of viewmodels is done like this codepen (http://codepen.io/frankox/pen/RrrXbV):

window.OnsNavigatorElement.rewritables.link = function(element, target, oons, callback) {
    ko.applyBindings(options.viewModel, target);
    callback(target);
};

function gotoFoobar(){
    document.querySelector('ons-navigator').pushPage('foobar.html', {viewModel: new FoobarViewModel()});
}

function FoobarViewModel() {
    var self = this;
    this.variableInFoobarViewmodel = "foobar";
}

My view in foobar.html:

  <ons-page>  
    <ons-tabbar>
        <ons-tab page="data.html"><span data-bind="text: variableInFoobarViewmodel"></span></ons-tab>
    </ons-tabbar>

    <ons-template id="data.html">
        <ons-page>
            Variable: <span data-bind="text: variableInFoobarViewmodel"></span>
        </ons-page>
    </ons-template>
</ons-page>

Result: variableInFoobarViewmodel in the tab-title resolves correctly, but inside the tabbar page data.html it resolves empty.

I would expect it to resolve properly, since the template data.html is inside foobar.html.

Any suggestions?

Answer 1

<ons-template id="data.html"> is just a template, it's not part of the page so it won't have any view model. The Codepen that you link to is only prepared to be used with ons-navigator and was actually for beta.5. We already have the released version +2.0.0 so it's better to update. I made another quick example with better integration for all the components: tutorial app - codepen

The navigator uses the same strategy with navi.pushPage(page, {data: {viewModel: ...}}). The rest of the pages are linked to a viewModel by the ID but you can change that easily.