Как остановить оценку привязок knockout.js на дочерних элементах - PullRequest
Новая
       15

Как остановить оценку привязок knockout.js на дочерних элементах

18 голосов
/ 13 февраля 2012

Используя knockout, когда вы вызываете ko.applyBinding(viewModel, "divId"), он выполняет рекурсивное связывание через дочерние элементы элемента, с которым вы связаны ("divId").Я хотел бы остановить эту оценку на дочернем узле.Есть ли способ сделать это?

причина, по которой ...

Я хотел бы связать всю страницу с моделью представления навигации, это будет обрабатывать базовый макет и ... smile... навигация.На разных страницах я хотел бы привязать определенные регионы к различным моделям представления, которые не являются свойствами модели представления навигации.В настоящий момент, если я это делаю, я получаю сообщение об ошибке «невозможно проанализировать привязку», поскольку модель представления навигации не имеет требуемых свойств.Если бы я мог остановить связывание, спускаясь вниз по дому, я мог бы просто связать эти предметы по отдельности.

Ответы [ 2 ]

37 голосов
/ 13 февраля 2012

Есть несколько способов, которыми вы можете пойти по этому. Как правило, вы добавляете несколько моделей «вспомогательных» видов в модель основного вида, а затем используете привязку with в различных областях с фактическими моделями видов для привязки к ним.

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

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

Когда вы поместите это на элемент, КО будет игнорировать дочерние элементы. Затем вы можете вызвать ko.applyBindings для дочернего элемента этого элемента с другой моделью представления.

Образец: http://jsfiddle.net/rniemeyer/tWJxh/

Как правило, однако, вы бы использовали несколько моделей представлений под моделью основного вида, используя привязку with.

3 голосов
/ 13 февраля 2012

Один из способов сделать это - создать раздел для навигации (или просто a) и привязать к нему navVM. Затем создайте другой раздел для контента и привяжите к нему contentVM. Таким образом, нет конфликта, и все это очень разделено. 

<body>
    <div id="navSection">
    </div>
    <div id="contentSection">
    </div>
</body>

Затем выполните ko.applyBinding (navVM, "navSection") и ko.applyBinding (contentVM, "contentSection")

...