Как выбрать фактический HTML, сгенерированный нокаутом?

Question

Скажем, у меня есть следующий вид нокаута, как я могу получить внешнийHtml для фактического сгенерированного кода с помощью javascript. Всякий раз, когда я пытаюсь выбрать externalHtml «table_1» с javascript, я получаю html, содержащий разметку нокаута, а не фактический HTML, видимый на экране.

<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> 

Answer 1

нокаутных компоненты могут обеспечить связанный элемент.

см http://knockoutjs.com/documentation/component-registration.html

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

с помощью этого механизма, а «печати» компонент может быть разработана, который имеет доступ к innerHTML связанного элемента.

// 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>