onsenui 标签栏的淘汰赛绑定

Question

我正在使用带有 knockoutJS 的温泉 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 解析正确，但在标签栏页面内 data.html 它解析为空。

我希望它能正确解析，因为模板 data.html 在 foobar.html 中。

有什么建议吗？

Answer 1

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

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

onsenui 标签栏的淘汰赛绑定

Knockout binding for onsenui tabbar

knockout.js

onsen-ui