修复 JQM ajax 单页导航上的淘汰多个绑定

Posted 2023-05-09

【中文标题】修复 JQM ajax 单页导航上的淘汰多个绑定

【英文标题】：Fixing knockout multiple bindings on JQM ajax single page navigation

【发布时间】：2014-05-01 09:32:25

【问题描述】：

我正在开发一个 Windows 8 phonegap 应用程序。我也在使用 JQuery、JQuery Mobile、Knockout JS。我有点陷入普遍错误

“您不能多次对同一个元素应用绑定”

谷歌搜索给了我两个解决方案。

1)Ko.cleanNode（不建议这样做）

2)模板化（推荐方法）

我尝试使用推荐的模板方法，但仍然遇到同样的错误。

以下是我的 javascript 逻辑：

//Code for home.js

//My View model
function HomeViewModel() 
    var self = this;
    self.MyDaySchedule = [
         picture: "../../images/home/MyDaySchedule_video.png" ,
         day: "2", title: "Physical Activity after surgery", text: "you will have tasks each day to help gain strength. Complete self-assessments...", picture: "../../images/home/MyDaySchedule_b1.png" 
    ];

//Main Execution
function initialize() 
    console.log("Knockout activated");
    // Activates knockout.js

    ko.applyBindings(new HomeViewModel(), document.getElementById("#homePage"));

我将在我的 pageshow 事件中调用初始化函数。绑定将正确发生而不会出现任何错误，并且所有数据值都将在运行应用程序时显示。

以下是我使用基于模板的方法的 html 代码：

//home.html
//Binding one
   <div data-bind="template:  name: 'frame1data1-template', data: MyDaySchedule[0] ">  </div>
                            <script type="text/html" id="frame1data1-template">
                                <!-- Displays the "picture" field. -->
                                <img data-bind="attr:src: picture"
                                     id="frame1data1_img" draggable="false" />
                            </script>


//Binding two
<div data-bind="template:  name: 'frame1data2-template', data: MyDaySchedule[1] "></div>
                            <script type="text/html" id="frame1data2-template">
                                <img data-bind="attr:src: picture"
                                     src="#" id="frame1data2_img" draggable="false" />
                                <h1 id="frame1data2_daytext" class="disabletextselect">Day</h1>
                                <h1 id="frame1data2_dayvalue" class="disabletextselect" data-bind="text:day"></h1>
                                <h1 id="frame1data2_title" class="disabletextselect" data-bind="text:title"></h1>
                                <h1 id="frame1data2_text" class="disabletextselect" data-bind="text:text"></h1>
                                <input type="button" id="frame1data2_backpicture" data-role="none">
                            </script>

考虑单击上面的任何图像，我使用 $.mobile.navigate("new.html"); 导航到 new.html （完美地发生了）

当我使用 window.history.back() 从 new.html 导航回 home.html 时，我的错误发生了；这向我抛出了错误“您不能将绑定多次应用于同一元素”，因为尽管我使用模板方法再次调用了 ko.applyBindings()。

对于我的示例，是否有针对此错误的积极且合适的解决方法？

【问题讨论】：

我认为当您导航回主页时，绑定已经存在（在缓存中）并且再次调用了您的初始化方法，它显示了 multiplebinding.so 您可以调用 Ko.cleanNode() 之前ko.applyBindings 或您可以做的其他事情检查新呼叫或 window.history.back 呼叫。这是新的电话，然后只做 ko.applybinding。

Ko.cleanNode() 将起作用..但我必须将页面顶部元素（容器）作为元素传递给 ko.cleanNode()，这会冻结一些基于 css 的交互。我正在寻找 Ko.cleanNode() 的替代方法，例如我在这里使用的模板方法。对于您的评论...我也仅在我的示例中使用 window.history.back。

【参考方案1】：

我会将您的个人页面视图模型放入您的根视图模型中。然后只需对根视图模型应用一次绑定，并将data-bind="with: HomeViewModel()" 用于主页模板，其他页面也一样。