Пользовательские компоненты для нокаута, которые не конфликтуют с моделью центрального представления

Question

Я пытаюсь создать приложение с настраиваемыми компонентами, которые взаимодействуют с центральными поставщиками услуг, что прекрасно работает.

Вы можете увидеть пример на https://github.com/brianlmerritt/knockout-babel-browserify-gulp

Это написано в ES2015, и отлично компилируется.

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

Я думал, что понял http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html, но когда я окружаю компонент <!-- ko stopBinding : true -->, компонент не связывается. Если я не окружаю компонент, то получаю конфликт.

Если кто-то может указать мне, как зарегистрировать компонент таким образом, чтобы модель центрального представления не конфликтула, я был бы очень благодарен!

Каждый пользовательский компонент зарегистрирован:

ko.components.register(
    'component-one', 
    require('./components/component-one/component.js')); 

Чтобы сохранить центральную модель представления просто, я просто пошел с:

var centralViewModel = function centralViewModel() 
    { var bindingWorked = ko.observable(
     'The binding worked. KO view model centralViewModel has a this context and was bound to the html correctly'); 
}; 

К сожалению, когда я привязок они конфликтуют:

ko.applyBindings(centralViewModel(),document.body); 
ko.applyBindings(); // Pull in all of the components 

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

Answer 1

Кажется, что конфликт был фактически предотвращен, применив centralViewModel к DOM. Не было никакого конфликта с компонентами. Проблема была в centralViewModel.

Исправленный код:

ko.components.register(
    'component-one', 
    require('./components/component-one/component.js') 
); 

ko.components.register(
    'component-two', 
    require('./components/component-two/component.js') 
); 

ko.components.register(
    'component-three', 
    require('./components/component-three/component.js') 
); 
var centralViewModel = { 
    bindingWorked : ko.observable('The binding worked. KO view model centralViewModel has a this context and was bound to the html correctly') 
}; 

ko.applyBindings(centralViewModel,document.body);