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

非常感谢提前！

的Matthias

Answer 1

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

试试这个：

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

在您的组件视图模型中：

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

请参阅Fiddle

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

1 个答案: