Verwenden Sie einzelne Observable für mehrere Zeilen in der Tabelle

Question

<div class="tbody" data-bind="foreach: displayItems"> 
    <div class="t-row"> 
     <div class="t-cell"> 
      <div class="manage-location-buttons"> 
       <a href="javascript:void(0)"> 
        <i class="fa fa-pencil" aria-hidden="true" data-bind="toggleClick: $component.openEditPopup"></i> Edit 
       </a> 
       <div class="edit-table-popup" data-bind="visible: $component.openEditPopup"> 
        <ul> 
         <li><a data-hash="#locationmanagement/managelocations/locationediting" data-bind="click: goToTab">Locations</a></li> 
         <li><a data-hash="#locationmanagement/managelocations/events" data-bind="click: goToTab">Events</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Es ist mein Beispiel für benutzerdefinierte Tabelle.

Auf Link klicken, ich zeige edit-table-popup div wie Popup. Ursache Ich verwende nur eine beobachtbare openEditPopup für alle Elemente, onclick Ich sehe Popup für jede Zeile.

openEditPopup = ko.observable<boolean>(false); 

toggleClick - ist individueller dirrective, der

boolean Wert gegenüber ändert

Ist es möglich, nur eine beobachtbare zu verwenden, aber für geklickt Zeile nur Popup zu zeigen?

Answer 1

Ja, es ist möglich.

Die click Bindung sendet zwei Argumente an einen Ereignishandler:

1. Die $data geklickt haben,
2. Die Click-Ereignis.

Wenn Ihr Click-Handler ein beobachtbar ist, bedeutet dies, es der beobachtbaren wie so nennt: yourObservable(data, event)

Zu wissen, dass eine beobachtbare gesetzt ist, indem sie es mit einem Argument aufrufen, können Sie sich vorstellen, was passiert. Beachten Sie, dass knockout das zweite Argument ignoriert.

Die Lösung würde daher die openEditPopup aus, die ein bool zu ändern sein, eine displayItem zu enthalten, und die visible Bindung an wechselnden:

visible: $component.openEditPopup() === $data 

ein Beispiel:

var vm = { 
 

 
    selected: ko.observable("A"), 
 
    items: ["A", "B", "C", "D"] 
 
    
 
}; 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<p>Tabs</p> 
 
<div data-bind="foreach: items"> 
 
    <span data-bind="text: $data, click: $parent.selected"></span> 
 
</div> 
 

 
<p>Content</p> 
 
<div data-bind="foreach: items"> 
 
    <div data-bind="visible: $parent.selected() === $data"> 
 
    <h1 data-bind="text:$data"></h1> 
 
    </div> 
 
</div>

Answer 2

Wenn ich richtig verstehe y, alle Zeilen sind an eine Observable gebunden, und wenn Sie auf die Zeile klicken, wird sie auf True gesetzt und alle Popups werden angezeigt.

Wenn ja, würde dies vorschlagen, dass Sie ein Popup pro Zeile haben? Ich würde empfehlen, dies zu ändern und ein Popup zu haben, das pro Zeile umgeschaltet wird und dann seine Daten in der ausgewählten Zeile einstellt. So etwas kann mit dem folgenden Code erreicht werden.

var viewModel = function() { 
 
    var rows = ko.observableArray([ 
 
     {id: 1, name: "gimble"}, {id: 2, name: "bob"}, {id: 3, name: "jess"} 
 
    ]); 
 
    
 
    var selectedRow = ko.observable(); 
 
    
 
    function showRowPopup(row) 
 
    { 
 
    //console.log(row.id); 
 
     
 
    if(selectedRow() == row) 
 
     selectedRow(null); 
 
    else 
 
     selectedRow(row); 
 
    } 
 
    
 
    return { 
 
    rows: rows, 
 
    showRowPopup: showRowPopup, 
 
    selectedRow: selectedRow 
 
    } 
 
} 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 

 
<div data-bind="foreach: rows"> 
 
    <div> 
 
    <span data-bind="text: id"></span> - 
 
    <span data-bind="text: name"></span> 
 
    <button data-bind="click: $parent.showRowPopup">Toggle Modal</button> 
 
    </div> 
 
</div> 
 

 
<div data-bind="with: selectedRow"> 
 
    <h3>My Fake Modal</h3> 
 
    <span data-bind="text: id"></span> - 
 
    <span data-bind="text: name"></span> 
 
</div>