Zugriff auf Knockout Komponente DOM aus erforderlich AMD Ansichtsmodell

Question

ich meine Knockout-Komponente auf diese Weise laden:

ko.components.register("example", { 
    viewModel: {require: "widgets/example"}, 
    template: {require: "text!widgets/example.html"} 
}); 

mit example.js (stark vereinfacht):

"use strict"; 

define(["knockout"], function(ko) { 

    function ExampleWidgetViewModel(params) { 

     this.editedText = ko.observable("Example"); 
    } 

    return ExampleWidgetViewModel; 
}); 

und example.html:

<div id="example-dlg", data-bind="text: editedText"></div> 

Die Komponente wird wie üblich <example></example> und eve aufgerufen Alles funktioniert perfekt. Aber ich möchte auf das DOM zugreifen, um die Notwendigkeit der id in der Vorlage zu entfernen. Versuchen the method from the documentation Wechsel example.js zu sein:

"use strict"; 

define(["knockout"], function(ko) { 

    function ExampleWidgetViewModel(params, componentInfo) { 

     this.editedText = ko.observable("Example"); 
    } 

    return {createViewModel: ExampleWidgetViewModel}; 
}); 

Aber es beklagt, dass editedText nicht gefunden wird. Das gleiche Problem mit anderen Variationen wie folgt:

"use strict"; 

define(["knockout"], function(ko) { 

    function creaExample(params, componentInfo) { 
     let ExampleWidgetViewModel = (params) => { 

      this.editedText = ko.observable("Example"); 
     } 
     return ExampleWidgetViewModel; 
    } 
    return {createViewModel: creaExample}; 
}); 

Können Sie ein funktionierendes Beispiel bieten? Vielen Dank!

Answer 1

Nichts besseres als um Hilfe bitten, um eine Lösung zu finden ... Ich nannte fälschlicherweise das Ansichtsmodell. Die korrekte example.js Datei ist:

"use strict"; 

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

    function factory(params, componentInfo) { 
     function ViewModel() { 

      // To show how to access the component external div 
      console.log($(componentInfo.element.firstChild).attr("id")); 

      // To show it can correctly access parameters 
      this.editedText = params.oneParameter; 
     } 
     return new ViewModel(); 
    } 
    return {createViewModel: factory}; 
});