带有 pagerJs 的 KnockoutJs 单页应用程序 - 您不能将绑定多次应用于同一元素答案

【问题标题】：KnockoutJs Single page application with pagerJs - You cannot apply bindings multiple times to the same element带有 pagerJs 的 KnockoutJs 单页应用程序 - 您不能将绑定多次应用于同一元素
【发布时间】：2014-06-25 23:11:35
【问题描述】：

您好，我有一个使用敲除和 pagerjs 的单页应用程序的小问题。

在我的 index.html 中有

<div class="container" style="padding-top: 30px;" id="container">
  <span id="span" onclick = 'clickme(this)'>
    I am span
  </span>
  <div data-bind="page: {id: 'start' , title : 'First Page'}">
    you are currently viewing the content of first page. 
    <br />
    <a  href="#!/start/deep">
      first child
    </a>
    <br />
    <a  href="#!/start/second">
      second child
    </a>
    <br />
    <br />
    <div data-bind="page: {id: 'deep', title : 'Second Page',role: 'start', source: 'views/test1.html'}">
      you are currently viewing the content of first page inside First Page.
      <br />
      <a data-bind="page-href :'../second'" >
        Second Child
      </a>
    </div>

    <div data-bind="page: {id: 'second', title : 'Second Page', source: 'views/test.html'}">
      you are currently viewing the content of second page inside Second Page.
      <br />
      <a data-bind="page-href :'../deep'" >
        First Child
      </a>
    </div>

    <br />
    <br />
    <br />
    <a  href="#!/structure">
      Go to Structure
    </a>
  </div>
  <div data-bind="page: {id: 'structure', title : 'Second Page'}">
    you are currently viewing the content of second page.
    <br />
    <a  href="#!/start">
      Go to Start
    </a>
  </div>
</div>

我在索引页面上的 javascript 是这样的

function PagerViewModel(){
        var self    =   this;
    }

    $(function () {
        pager.Href.hash = '#!/';
        pager.extendWithPage(PagerViewModel.prototype);
        ko.applyBindings(new PagerViewModel(), document.getElementById("container"));
        pager.start();
    });

在我的 test.html 文件中

<div id="two">
......
</div>
<script type="text/javascript">
........
var viewModel = new PointPageModel([
    { name: "page1"},
    { name: "page2"},
    { name: "page3"},
    { name: "page"}
]);

ko.applyBindings(viewModel, document.getElementById("two"));
</script>

我仍然收到错误：您不能将绑定多次应用于同一个元素。我不是绑定到不同的元素吗？任何建议将不胜感激。

最好的问候，加弗里尔

【问题讨论】：

你的div“二”是否包含在test.html页面的容器div中？
确实，您的 div 'two' 可能在容器内。当您应用绑定时，您将它们应用到目标元素和所有它的孩子。由于 'two' 是容器的子元素，因此您最终会对该元素应用两次绑定。或者至少，这可能是问题:)
两个是页面容器的子级。我需要为 pagerjs 工作一次，为该页面的视图模型绑定一次。有什么办法吗？如果您可以将我指向一个使用 pagerjs 并加载具有自己的视图模型要绑定的页面的单页应用程序，那就太好了

标签： jquery html knockout.js single-page-application pagerjs

【解决方案1】：

您应该能够使用自定义绑定来停止绑定元素的子元素。

ko.bindingHandlers.stopBinding = {
        init: function () {
            return { controlsDescendantBindings: true };
        }
    };

然后你可以将你的“两个”元素包装在另一个 div 中并像这样使用它：

<div data-bind="stopBinding: true">
    <div id="two">
    ......
    </div>
</div>

【讨论】：

【解决方案2】：

我不确定为什么您希望寻呼机接收自己的视图模型而不是在整个页面上设置一个，但我认为您想要的是每个子页面的视图模型，在这种情况下您可能会追求：

data-bind="page: {id: 'second', title : 'Second Page', source: 'views/test.html', withOnShow: viewModel()}"

它会在打开此页面后为您提供该页面的视图模型。（代码未经测试，您可能需要稍微移动一下 viewModel 声明）。

来自 Pager.js 参考页面：http://pagerjs.com/demo/#!/start/config

withOnShow：函数（函数（对象），页面）一旦页面首次显示，此成员可以延迟绑定视图模型。 withOnShow 采用一个应该采用 2 个参数的方法：一个回调（应该提供给视图模型）和当前的页面对象。

当您想将单页应用程序的视图模型拆分为多个仍可相互通信的较小视图模型时，此属性非常有用。您可以为页面提供特定项目的视图模型。

如果您设置 sourceCache: true ，则每次重新访问页面时视图模型都不会重新加载。

<div data-bind="page: {id: '?', withOnShow: Cool.loadUser}">
    <h1 data-bind="text: userName"></h1>
</div>
Cool.loadUser = function(callback, page) {
    $.get('service/users/' + page.currentId, function(data) {
        callback(ko.mapping.fromJSON(data));
    });
};

【讨论】：