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 };
        }
    };

然后你可以包装你的＆＃34;两个＆＃34;另一个div中的元素并使用它：

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

Answer 2

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

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），Page）   一旦首次显示页面，该成员就可以对视图模型进行延迟绑定。 withOnShow采用一个应该采用2个参数的方法：一个回调（应该是视图模型）和当前的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));
    });
};

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

2 个答案: