1

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

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

最好的问候，加弗里尔

4

2 回答 2

0

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

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

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

<div data-bind="stopBinding: true">
    <div id="two">
    ......
    </div>
</div>
于 2014-05-08T16:15:33.243 回答
0

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

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 个参数的方法：一个回调（应该提供给视图模型）和当前的页面对象。

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

如果您设置 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));
    });
};
于 2014-10-15T00:03:18.477 回答