KnockoutJS: доступ к наблюдаемой переменной за пределами настраиваемого компонента

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