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

次に、「2」要素を別の div でラップし、次のように使用できます。

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