Wie wähle ich den von knockoutjs generierten HTML-Code aus?

Angenommen, ich habe die folgende knockout-Ansicht, wie kann ich den upperHtml für den tatsächlich generierten Code mit Javascript erhalten. Immer wenn ich versuche, den upperHtml von "table_1" mit Javascript auszuwählen, lande ich mit dem html, das das Knockout-Markup enthält, anstatt dem eigentlichen HTML, das auf dem Bildschirm sichtbar ist.Wie wähle ich den von knockoutjs generierten HTML-Code aus?

<table id="table_1"> 
    <thead> 
     <tr> 
      <th>Name</th> 
     <th>Date</th> 
    </tr> 
</thead> 
<tbody> 
    <!-- ko foreach: $data.Rows --> 
    <tr> 
     <td data-bind="text: Name"></td> 
     <td data-bind="text: Date"></td> 
    </tr> 
    <!-- /ko --> 
</tbody>

Quelle

2017-02-13 Ryannet

Sie sollten sich zuerst fragen, warum Sie, dass in erster Linie tun möchte. Knockout soll das DOM manipulieren und Sie sollten keine Hacks um es herum schreiben. –

Aber wenn Sie es wirklich tun wollten, wäre eine schnelle Lösung, das Ganze mit jquery zu analysieren, jeden Knoten zu durchlaufen und einfach die 'Datenbinde' mit' removeAttr ('data-bind') zu entfernen. '. –

Ich muss das HTML exportieren, das Knockout über Javascript generiert. Das Problem ist, dass OuterHtml nur den HTML-Code erhält, wie er auf der Seite BEFORE vorhanden war, bevor er manipuliert wird. – Ryannet

knockout Komponenten können das gebundene Element bereitzustellen.

siehe http://knockoutjs.com/documentation/component-registration.html

ko.components.register('printable-component', { 
    viewModel: { 
    createViewModel: function(params, componentInfo) { 
     console.log(componentInfo.element); 
    } 
    } 
});

diesen Mechanismus unter Verwendung einer ‚druckbaren‘ Komponente entwickelt werden können, die Zugriff auf den innerHTML- des gebundenen Element hat.

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI 
 
function AppViewModel() { 
 
    this.Rows = [{ 
 
    Name: 'Joseph', 
 
    Date: '2017-02-13' 
 
    }, { 
 
    Name: 'Mary', 
 
    Date: '2017-02-13' 
 
    }]; 
 
} 
 

 
// define a printable component 
 
ko.components.register('printable-component', { 
 
    viewModel: { 
 
    // create using the factory function 
 
    // see http://knockoutjs.com/documentation/component-registration.html 
 
    createViewModel: function(params, componentInfo) { 
 

 
     // return a new ViewModel for the component 
 
     return new function() { 
 
     this.rows = params.rows; 
 

 
     // track the componentInfo 
 
     this.componentInfo = componentInfo; 
 

 
     // print method function 
 
     this.print = function() { 
 
      alert(componentInfo.element.innerHTML); 
 
     } 
 
     } 
 
    } 
 
    }, 
 

 
    // the component template 
 
    // note: can be jsx 
 
    // note: can be defined in html using internal template nodes 
 
    // note: print button can be hidden using CSS or by defining it outisde the printable component and use the params to start the print function 
 
    template: '<table><thead><tr><th>Name</th><th>Date</th></tr></thead><tbody><!-- ko foreach: $data.rows --> <tr><td data-bind="text: Name"></td><td data-bind="text: Date"></td></tr><!-- /ko --></tbody></table><a href="javascript:void();" data-bind="click:print">print</a>' 
 
}); 
 

 

 
// Activates knockout.js 
 
ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<printable-component params="rows:$data.Rows"></printable-component>

Quelle

2017-02-15 18:33:39 Martijn

Wie wähle ich den von knockoutjs generierten HTML-Code aus?

Antwort

Verwandte Themen