KnockoutJs Одностраничное приложение с 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>

Я по-прежнему получаю сообщение об ошибке: нельзя применять привязки несколько раз к одному и тому же элементу. Разве я не привязывался к разным элементам? Любые советы будут оценены.

С уважением, Гаврил.


html jquery single-page-application knockout.js pagerjs
person user3573766    schedule 08.05.2014    source источник
comment
Ваш второй div включен в div-контейнер на странице test.html?   -  person milagvoniduak    schedule 08.05.2014
comment
Действительно, ваш div 'two', вероятно, находится внутри контейнера. Когда вы применяете привязки, вы применяете их к целевому элементу и ВСЕМ ЕГО ДЕТЯМ. Поскольку «два» является дочерним элементом контейнера, вы дважды применяете привязки к этому элементу. Или, по крайней мере, это может быть проблемой :)   -  person Hans Roerdinkholder    schedule 08.05.2014
comment
two является дочерним элементом контейнера страницы. Мне нужно привязать один раз для работы pagerjs и один раз для модели представления для этой страницы. Любой способ сделать это? Было бы здорово, если бы вы могли указать мне одностраничное приложение, которое использует pagerjs и загружает страницы, которые имеют свою собственную модель представления для привязки.   -  person user3573766    schedule 12.05.2014

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны иметь возможность использовать пользовательскую привязку, чтобы остановить привязку дочерних элементов элемента.

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

Затем вы можете обернуть свой элемент «два» в другой div и использовать его следующим образом:

<div data-bind="stopBinding: true">
    <div id="two">
    ......
    </div>
</div>
person Jerry    schedule 08.05.2014

arrow_upward
0
arrow_downward

Я не уверен, почему вы хотите, чтобы пейджер получал свою собственную модель просмотра, а не устанавливал ее для всей страницы, но я думаю, что вам нужна модель просмотра для каждой подстраницы, и в этом случае вы, вероятно, после:

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));
    });
};
person IsDonIsGood    schedule 15.10.2014