KnockoutJS:访问自定义组件之外的可观察变量

KnockoutJS: Access to observable Variable outside of an custom component

本文关键字：观察 变量 访问 自定义 组件 KnockoutJS      更新时间：2023-09-26

我已经搜索了很多，但无法弄清楚如何处理我的问题。我创建了一个自定义组件，模板位于<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();

提前非常感谢！

马蒂亚斯

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

试试这个：

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

在您的组件视图模型中：

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

见小提琴

相关文章：