javascript - knockout : Access to observable Variable outside of an custom component

Question

我已经搜索了很多，但不知道如何处理我的问题。 我创建了一个自定义组件，模板位于 <script type="text/html"></script> 中标签。在这个模板之外，我有一个变量，我在做某事后尝试操作它。这不起作用，它没有定义。是否有可能操纵该可观察量？

我的代码如下所示:

HTML:

<customcomponent></customcomponent>
<script type="text/html" id="customcomponent-tpl">
    <span data-bind="text: foo">Foo</span>
    <span data-bind="text: bar">Bar</span>
</script>
<span data-bind="text: foobar">Foobar</span>

JS:

var customComponentViewModel = function() {
    this.foo = ko.observable();
    this.bar = ko.observable();
    this.foobar = ko.observable();

    this.foo('Foo!');
    this.bar('Bar!');
    this.foobar('Foo! Bar!');


    console.log(this.foo());
    console.log(this.bar());
    console.log(this.foobar());
};

// do another stuff...

/**
 * Register KO component
 */

ko.components.register('customcomponent', {
    viewModel: customComponentViewModel,
    template: {
        element: 'customcomponent-tpl'
    }
});

ko.applyBindings();

非常感谢!

马蒂亚斯

Answer 1

问题是您根本没有应用于文档的 View 模型，您只有一个组件 View 模型。

试试这个:

var vm = { foobar: ko.observable('') };
ko.applyBindings(vm);

在你的组件 View 模型中:

ko.dataFor(document.body).foobar('Foo! Bar!');

参见Fiddle