使用pagerJs的KnockoutJs单页面应用程序-不能对同一元素多次应用绑定

Question

嗨，我有一个使用knockout和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>

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

致以最好的问候，Gavril

Answer 1

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

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

然后，您可以将"two“元素包装在另一个div中，并像这样使用它：

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

Answer 2

我不知道为什么你想让pager接收它自己的视图模型，而不是在整个页面上设置一个视图模型，但我认为你想要的是每个子页面的视图模型，在这种情况下，你可能想要：

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

这将为您提供此页面打开后的视图模型。(代码未经过测试，您可能需要稍微移动一下viewModel声明)。

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

withOnShow : Function(Function(Object)，withOnShow)这个成员使得在第一次显示页面时延迟绑定视图模型成为可能。withOnShow采用的方法应该有两个参数:一个回调(应该传递给视图模型)和当前的Page-object。

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

如果设置为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));
    });
};