javascript - knockout 绑定(bind)自定义组件，使其不与中心 View 模型冲突

Question

我正在尝试创建一个具有与中央服务提供商交互的自定义​​组件的应用程序，效果很好。

您可以在 https://github.com/brianlmerritt/knockout-babel-browserify-gulp 查看示例

它是用 ES2015 编写的，编译得很好。

问题是我希望能够加载适用于每个页面的中央 View 模型，当然，拥有自己的 View 模型的组件除外。

我以为我明白了http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html但是当我用 <!-- ko stopBinding : true --> 包围组件时组件绑定(bind)失败。如果我没有包围该组件，则会发生绑定(bind)冲突。

如果有人能指出如何以中心 View 模型不冲突的方式注册组件，我将非常感激!

每个自定义组件都注册为:

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

为了保持中心 View 模型简单，我选择了:

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

可悲的是，当我进行绑定(bind)时，它们发生冲突:

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

我确信一定有一种方法可以以不与中心 View 模型冲突的方式引入组件。

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