Knockout Bindung Iteration

Question

ich ein Szenario habe, wo auf der beobachtbare Flagge basiert Ich brauche ABC und XYZ

aktuellen Code

<div data-bind="visible: isEnabled"> 
      <ul data-bind="foreach: relatedObservalableArray"> 
       <li> 
       <!-- Hundred lines of code> 
       </li> 
      </ul> 
</div> 


<div data-bind="visible: !isEnabled"> 
     <ul data-bind="foreach: unRelatedObservalableArray"> 
       <li> 
       <!-- Same Hundred lines of code> 
       </li> 
      </ul> 
    </div> 

Ich fühle mich Code Duplikat iterieren.

Kann ich die beiden HTML-Funktionen auf eine einzige Weise gruppieren?

Ich mag zu einem anderen Grunde nur in HTML-Teil ändern ...

Ich bin neu in Knockout. Kann mir jemand helfen?

Answer 1

Sicher können Sie die Knockout template Bindung dafür verwenden. Lesen Sie mehr here.

Also für die Änderungen wäre es etwas wie unten, aber Sie können Variationen basierend auf was Sie von dem Link, den ich gab.

<script type="text/html" id="template-name"> 
    Hundred lines of code... 
</script> 

<div data-bind="visible: isEnabled"> 
    <ul data-bind="foreach: relatedObservalableArray"> 
    <li data-bind="template: 'template-name'"> 
    </li> 
    </ul> 
</div> 


<div data-bind="visible: !isEnabled"> 
    <ul data-bind="foreach: unRelatedObservalableArray"> 
    <li data-bind="template: 'template-name'"> 
    </li> 
    </ul> 
</div>