Question

我有以下设置：knockout，phonegap，JQM。

我的申请基于http://propertycross.com/jquery-mobile/

直到现在我的应用程序才是一棵树＆＃39;结构 - 即用户点击一个菜单条目，而当他想要一个不同的菜单条目时，他必须点击“返回”。按钮导航回主菜单。

但现在我要求用户可以从应用中的任何位置跳转到任何菜单条目。但这会让后面的人感到困惑。功能，因为视图模型被新数据覆盖... 即

场景A：我显示菜单 - ＆gt;用户点击entry1 - ＆gt;我将applyBindings model1改为view1 - ＆gt; view1显示带有entry2的链接 - ＆gt;点击链接 - ＆gt;我改变了model1中的值 - ＆gt; view1显示新数据 - ＆gt;用户点击返回 - ＆gt; view1显示但数据错误

我尝试通过applyBindings解决新数据，但这会导致数据绑定处理程序多次触发。即

方案B：我显示菜单 - ＆gt;用户点击entry1 - ＆gt;我将applyBindings model1改为view1 - ＆gt; view1显示带有entry2的链接 - ＆gt;点击链接 - ＆gt;我将applyBindings model2用于view1-＆gt; view1显示新数据 - ＆gt;点击处理程序多次启动......

我可以使用标志阻止多次执行 - 但我不想在我的代码中为每个函数执行此操作...

我认为可能有使用淘汰赛模板的解决方案，但我找不到合适的例子...

所以我的问题是：

淘汰/ phonegap / JQM不适合这种情况：循环应用结构+后退按钮？或者我错过了什么？
可以用模板解决吗？怎么样？
任何替代解决方案？

Answer 1

我的解决方案是：使用jQuery append（）动态生成视图，例如：

$.each(acts, function (key, act) {
            if (!that.missionListViewModels[act.id]) {
                that.missionListViewModels[act.id] = new MissionListViewModel(application);
                $("body").append('<div data-theme="b" data-role="page" id="missionListView'+act.id+'"  data-url="missionListView'+act.id+'"  style="text-align:left;"><div data-bind="template: { name: \'missionListViewTemplate\', data: missionListModel }"></div></div>');
            }
}

注意：

我保留一个数组（that.missionListViewModels），引用动态创建的missionListViewModel以供将来参考。
为了保持append（）中的代码简短，我使用了ko模板，但这不是必需的。

JQM / KO模板不支持append（）：

通常由JQM生成的data-url缺失，因此我不得不手动添加它。
模板中的数据-i18n不起作用，我不得不使用data-bind =“text：...”而不是
~~'with'在模板内部无效，我不得不更改代码以避免它。~~

knockout.js +后退按钮 - 绑定多次触发

1 个答案: