2017-02-21 3 views
0
<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> 

Это мой образец пользовательской таблицы.Использование одного наблюдаемого для нескольких строк в таблице

On Link click Я покажу edit-table-popup div как всплывающее окно. Потому что я использую только один наблюдаемый openEditPopup для всех элементов, onclick Я вижу всплывающее окно для каждой строки.

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

toggleClick - это обычай dirrective, который изменяет логическое значение на противоположное

Можно ли использовать только один наблюдаемый, но, чтобы показать всплывающее окно только щелкнули строки?

ответ

0

Да, это возможно.

click связывание посылает два аргумента в обработчик событий:

  1. щелкнул $data,
  2. Клик-событий.

Если ваш обработчик щелчка является наблюдаемым, это означает, что он называет наблюдаемым так: yourObservable(data, event)

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

В связи с этим решением было бы изменить openEditPopup от содержащего bool, чтобы содержащий displayItem, и изменения visible связывания с:

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

примера:

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>

0

Если я правильно понял y, все ваши строки привязаны к одному наблюдаемому, и поэтому, когда вы нажимаете на строку, она устанавливает значение true, и все всплывающие окна появляются?

Если это так, это может означать, что у вас есть всплывающее окно за строку? Я бы рекомендовал изменить это и иметь одно всплывающее окно, которое переключается на строку, а затем установить его данные в выбранную строку. Что-то вроде этого может быть достигнуто с помощью кода ниже.

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>

+0

Я не хочу иметь для каждой строки различного всплывающего окна, потому что это может иметь некоторое влияние на производительность, поскольку я имею в виду – demo

Смежные вопросы