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

많은 감사를!

마티아스

Answer 1

이 문제는 당신이 모든 문서에 적용되는 뷰 - 모델이 없다는 것입니다, 당신은 단지 구성 요소 뷰 - 모델이있다.

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

그리고 구성 요소 뷰 - 모델에

가 :

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

당신이 당신의 변수가 정의되지 않은 장소를 보여줄 수 Fiddle