녹아웃 구성 요소 내에서 DOM 요소 참조하기

Question

녹아웃 구성 요소를 쓰고 있는데 jquery를 통해 구성 요소 내의 DOM 개체를 조작해야합니다.

요소에 대한 참조를 얻으려면 어떻게해야합니까? id 특성을 페이지에있는 구성 요소의 각 인스턴스에 대해 반복되기 때문에이 특성을 사용할 수 없습니다.

이 예제를 고려

:

<!-- component template --> 
<div> 
    <p data-bind="text: name"> 
    <audio></audio> 
</div> 


// View model 
define(["jquery", "knockout"], function ($, ko) { 

    var audioElement = $("????"); 

    function vm(params) {   
     var self = this; 
     self.name = params.name;  
    }; 

    return vm; 
}); 

가 어떻게 오디오 태그에 JQuery와 참조를 잡을 수 있고, 때 페이지의 구성 요소 중 하나 개 이상의 인스턴스가있을 것인가?

Answer 1

createViewModel 팩토리 함수로 구성 요소를 등록하면 구성 요소 인스턴스화시 관련 DOM 부분에 액세스 할 수 있습니다. the docs에서

, componentInfo에 대한 주석을 참조하십시오

ko.components.register('my-component', { 
    viewModel: { 
    createViewModel: function(params, componentInfo) { 
     // - 'params' is an object whose key/value pairs are the parameters 
     // passed from the component binding or custom element 
     // - 'componentInfo.element' is the element the component is being 
     // injected into. When createViewModel is called, the template has 
     // already been injected into this element, but isn't yet bound. 
     // - 'componentInfo.templateNodes' is an array containing any DOM 
     // nodes that have been supplied to the component. See below. 

     // Return the desired view model instance, e.g.: 
     return new MyViewModel(params); 
    } 
    }, 
    template: ... 
}); 

난 강력하게 녹아웃과를 통해 DOM 조작을 수행하는 게 좋을 것하지만 데이터는-결합한다.