Нокаут: шаблон Bind самозагрузки модальный для многих объектов данных

Question

Я относительно новым в Javascript и Knockout JS и я столкнулся с проблемой ниже:

Я загружать данные из запроса Ajax и сопоставить его в мой объект:

function ActivityModel(obj) { 
     if (typeof (obj) != 'undefined') { 
      this.ShowTable = ko.observable(true); 
      this.Name = ko.observable(obj.nomVessel); 
      this.NumRecords = ko.observable(obj.data.length); 
      this.DataRecords = ko.observableArray([]); 
      var aux = []; 
      //When add new items, mark they as changed, so the update css style will be loaded 
      $.each(obj.data, function (index, value) { 
       aux.push({ hasChanged: ko.observable(true), record: value }); 
      }); 
      this.DataRecords.push(aux); 

     } 
} 

Я храню все объекты в наблюдаемом массиве с именем DataTables. Затем, основываясь на данных, я вынести «гаджет», который состоит из DIV с некоторыми кнопками и таблицу, которая загружает мои записи данных:

<!-- ko foreach: DataTables --> 
<div class="col-sm-6"> 
    <div class="box gadget"> 
     <div class="box-header clearfix"> 
      <a href="#" class="close-btn" title="Delete Gadget" data-bind="click: function (data, event) { $root.DeleteGadget(data, event) }"><i class="glyphicon glyphicon-remove"></i></a> 
      <a href="#" class="minimize-btn" title="Minimize Gadget"><i class="glyphicon glyphicon-chevron-up"></i></a> 
      <h1><strong><span data-bind="text: $data.Name"></span></strong> - Activities</h1> 
      <div class="icons pull-right"> 
       <a href="#modal-configure-gadget" title="Configure Gadget" data-toggle="modal"><i class="glyphicon glyphicon-cog"></i></a> 
      </div> 
     </div> 
     <div class="box-body"> 
      <div class="table-responsive"> 
       <table class="table table-bordered table-hover text-left density-medium"> 
        <thead> 
         <tr> 
          <th>Start Date</th> 
          <th>Start Time</th> 
          <th>End Date</th> 
          <th>End Time</th> 
          <th>Details</th> 
         </tr> 
        </thead> 
        <tbody data-bind="foreach: $data.DataRecords"> 
         <tr class="tooltipstered" data-bind="tooltipster: 'bottom-right'"> 
          <td data-bind="text: $data.record.startDate"></td> 
          <td data-bind="text: $data.record.endDate"></td> 
          <td data-bind ="text: $data.record.details"></td> 

         </tr> 
        </tbody> 
       </table> 
      </div> 
      </div>   
    </div> 
</div> 
<!-- /ko --> 

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

<div class="icons pull-right"> 
       <a href="#modal-configure-gadget" title="Configure Gadget" data-toggle="modal"><i class="glyphicon glyphicon-cog"></i></a> 
</div> 

код модальной

<div id="modal-configure-gadget" class="modal fade modal-configure-gadget" role="dialog" tabindex="-1"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header shadow"> 
        <button type="button" class="close" data-dismiss="modal">×</button> 
        <i class="icon-arrow-down-circle"></i><span class="h2">Configure <strong>gadget</strong></span> 
       </div> 
       <div class="modal-body"> 
        <form action="" class="form-horizontal" role="form"> 
         <div class="row"> 
          <div class="col-sm-6"> 
           <span class="h2">Set <strong>size</strong></span> 
           <div class="box box-filter"> 
            <div class="form-group row"> 
             <label for="linhas" class="control-label col-sm-4">Rows:</label> 
             <div class="add-remove-button col-sm-8"> 
              <span class="btn btn-mini btn-navbar decrease-button"> 
               <i class="glyphicon glyphicon-minus"></i> 
              </span> 
              <input id="linhas" type="text" class="form-control" value="1"> 
              <span class="btn btn-mini btn-navbar increase-button"> 
               <i class="glyphicon glyphicon-plus"></i> 
              </span> 
             </div> 
            </div>        
           </div> 
          </div> 
         </div> 
        </form> 
       </div> 
       <div class="modal-footer shadow"> 
        <button class="btn btn-success">Ok</button> 
        <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button> 
       </div> 
      </div>  
     </div> 
    </div> 

Моей проблема: для каждого «гаджет», созданный, я хотел бы, чтобы связать кнопку, которую я показал, чтобы открыть -й e модальный. Кроме того, входные слова «linhas» внутри модального объекта должны быть привязаны к наблюдаемым NumRecords моего объекта. Когда я пытался связать с помощью простой привязки кликов, у меня появилось неожиданное поведение, когда я изменил значение ввода для одного объекта (таким образом, обновляя один наблюдаемый NumRecords), и этот вызов каким-то образом транслировался на другие гаджеты на экране. Я также попытался использовать пользовательские привязки:

ko.bindingHandlers.UpdateActivityCount = { 
init:function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
    $('#modal-configure-gadget').on('show.bs.modal', function(e) { 
     $('#linhasActivity').val(bindingContext.$data.NumActivities()); 
    }); 
}, 
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 

    $('#modal-configure-gadget .btn-success').on('click', function(e) { 

     var confirm_button = $(e.target).is("#btnConfirmActivitiesChange"); 

     if (confirm_button === true) { 
      //Update Value 
      self.UpdateObservableValue(data.NumRecords, $('#linhasActivity'), 'int', data, event); 
     } 

    }); 
} 
}; 

но неожиданное поведение оставалось.

Я подозреваю, что это поведение происходит из-за того, что идентификатор модального и его элементов одинаковы для каждого созданного гаджета (вместо того, чтобы иметь один модальный для каждого гаджета, у меня есть только один модальный для всех из них и он порождает конфликт). Однако я не знаю, как создавать несколько модалов с разными идентификаторами (и разными идентификаторами для таких компонентов, как кнопки и входы). Я посмотрел на привязку компонента, но не мог понять, как это работает, и было бы полезно решить мою проблему.

У кого-нибудь есть предложение?

Спасибо.

Answer 1

Некоторые предложения

в

<tbody data-bind="foreach: $data.DataRecords"> 
    <tr class="tooltipstered" data-bind="tooltipster: 'bottom-right'"> 
     <td data-bind="text: $data.record.startDate"></td> 
     <td data-bind="text: $data.record.endDate"></td> 
     <td data-bind ="text: $data.record.details"></td> 
    </tr> 
</tbody> 

вам не нужно использовать переменную $data, так как вы уже внутри foreach контекста. Вы можете заменить его на

<tbody data-bind="foreach: DataRecords"> 
    <tr class="tooltipstered" data-bind="tooltipster: 'bottom-right'"> 
     <td data-bind="text: record.startDate"></td> 
     <td data-bind="text: record.endDate"></td> 
     <td data-bind ="text: record.details"></td> 
    </tr> 
</tbody> 

Также для модального диалога вы можете иметь один диалог для отображения деталей различных объектов.Что-то вроде

<!-- ko with: currentDialogDetails --> 
<input id="linhas" type="text" class="form-control" data-bind="textInput: NumRecords" /> 
<!-- /ko --> 

а имеет click обязательное для открытия диалогового окна, как

<div class="icons pull-right"> 
    <a href="#modal-configure-gadget" data-bind="click: $root.setCurrentDialogDetails" title="Configure Gadget" data-toggle="modal"></i></a> 
</div> 

и в модели представления, добавить наблюдаемый и другой обработчик щелчка как

this.currentDialogDetails = ko.observable(null); 
this.setCurrentDialogDetails = function(details){ 
    this.currentDialogDetails(details); 
}