DOM-Elemente innerhalb einer Knockout-Komponente referenzieren

Question

Ich schreibe eine Knockout-Komponente, und ich muss einige der DOM-Objekte innerhalb der Komponente über jquery manipulieren.

Wie bekomme ich einen Verweis auf ein Element? Ich kann kein Attribut id darauf setzen, da es für jede Instanz der Komponente auf der Seite wiederholt wird.

dieses Beispiel vor:

<!-- 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; 
}); 

Wie kann ich einen jquery Verweis auf den Audio-Tag greifen, wann wird es mehr als eine Instanz der Komponente auf der Seite sein?

Answer 1

Wenn Sie Ihre Komponente mit einer createViewModel Factory-Funktion registrieren, haben Sie beim Instanziieren einer Komponente Zugriff auf die relevanten DOM-Teile.

Von the docs finden Sie die Kommentare über 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: ... 
}); 

Ich würde stark die DOM-Manipulation über Knockout zu tun vorschlagen und seine Daten-bindet though.