Question

我正在使用带有knockoutJS的onsen UI。页面导航和视图模型的绑定就像这个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";
}

我在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>

结果：tab-title中的variableInFoobarViewmodel正确解析，但在tabbar页面data.html中它解析为空。

我希望它能够正确解析，因为模板data.html位于foobar.html内。

有什么建议吗？

Answer 1

<ons-template id="data.html">只是一个模板，它不是页面的一部分，所以它不会有任何视图模型。您链接到的Codepen仅准备与ons-navigator一起使用，实际上是针对beta.5。我们已经发布了版本+2.0.0，所以最好更新。我做了另一个快速示例，更好地集成了所有组件：tutorial app - codepen

导航器使用与navi.pushPage(page, {data: {viewModel: ...}})相同的策略。其余页面通过ID链接到viewModel，但您可以轻松更改它。

针对onsenui tabbar的Knockout绑定

1 个答案: