ノックアウト：多くのデータのバインドテンプレート、ブートストラップモーダルが

Question

オブジェクトIはJavascriptとノックアウト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> 

私の問題があるのコード：作成した各「ガジェット」の、私は目を開くことが示されてきたボタンをバインドしたいと思いますモーダル。さらに、モーダル内の入力 'linhas'は、オブジェクトの観測可能なNumRecordsにバインドされる必要があります。私は単純なクリックバインディングを使用してバインドしようとしましたが、予期しない動作が1つのオブジェクトの入力値を変更しました（したがって、単一の観測可能な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); 
     } 

    }); 
} 
}; 

予期しない動作が残っています。

私は、モーダルとその要素のIDが作成されたすべてのガジェットと同じであるため、この動作が発生していると思われます。（各ガジェットに対して1つのモーダルを持つ代わりに、すべてのモーダルを1つしか持たず、 ）。 しかし、異なるID（ボタンや入力などのコンポーネントで異なるID）を持つ複数のモーダルを生成する方法はわかりません。私はコンポーネントバインディングを見ましたが、それがどのように機能し、問題を解決するのに役立つかどうかを理解できませんでした。

誰かが提案していますか？

ありがとうございました。あなたはforeachコンテキスト内に既にあるので、あなたはいけない

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

で

Answer 1

ヒント

は、$data変数を使用する必要があります。あなたが別のオブジェクトの詳細を表示する1つのダイアログを持つことができ、モーダルダイアログのも

<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); 
}