淘汰賽動態掌握細節

Question

在動態創建，讀取，更新的追求，通過KnockoutJS刪除

與其他專家（dynamic column and rows with knockoutjs）

<script type="text/javascript"> 
    var columnDefs = [{ 
     "$id": "1", 
      "ColumnName": "Id", 
      "system_type_id": 56, 
      "primaryCol": 1 
    }, { 
     "$id": "2", 
      "ColumnName": "Inv_Id", 
      "system_type_id": 231, 
      "primaryCol": 0 
    }, { 
     "$id": "3", 
      "ColumnName": "ACX_No", 
      "system_type_id": 175, 
      "primaryCol": 0 
    }, { 
     "$id": "4", 
      "ColumnName": "ACX_Name", 
      "system_type_id": 175, 
      "primaryCol": 0 
    }, { 
     "$id": "5", 
      "ColumnName": "S_No", 
      "system_type_id": 175, 
      "primaryCol": 0 
    }, { 
     "$id": "27", 
      "ColumnName": "Acc_Class", 
      "system_type_id": 231, 
      "primaryCol": 0 
    }, { 
     "$id": "28", 
      "ColumnName": "Direction", 
      "system_type_id": 231, 
      "primaryCol": 0 
    }]; 

    var rowDefs = [{ 
     "$id": "1", 
      "Id": 1, 
      "Inv_Id": "PV0001-1", 
      "ACX_No": "6", 
      "ACX_Name": "ABC", 
      "S_No": "5", 
      "Acc_Class": "Local", 
      "Direction": "Two-Way" 
    }, { 
     "$id": "2", 
      "Id": 2, 
      "Inv_Id": "PV0002-1", 
      "ACX_No": "3", 
      "ACX_Name": "CKD", 
      "S_No": "6", 
      "Acc_Class": "Local", 
      "Direction": "Two-Way" 
    }]; 

    function HeaderViewModel(data, parent) { 
     var self = this, 
      nbsp = String.fromCharCode(160); 

     // observables 
     ko.mapping.fromJS(data, {}, self); 
     //self.isVisible = ko.observable(true); 

     // computeds 
     self.isVisible = ko.computed(function() { 
      //console.log('data.ColumnName.indexOf(\'SYS\'):', data.ColumnName.indexOf('SYS')); 
      return data.ColumnName.indexOf('SYS') >= 0 ? false : true; 
     }); 
     self.HeaderName = ko.computed(function() { 
      return data.ColumnName.replace('_', nbsp); 
     }); 
     self.SystemField = ko.computed(function() { 
      return data.ColumnName.indexOf('SYS'); 
     }); 
     self.Visible = ko.computed(function() { 
      //console.log('data.ColumnName.indexOf(\'SYS\'):', data.ColumnName.indexOf('SYS')); 
      return data.ColumnName.indexOf('SYS') >= 0 ? false : true; 
     }); 
    } 
    // --------------------------------------------------------------------------- 

    function RowViewModel(data, parent) { 
     var self = this, 
      nbsp = String.fromCharCode(160); 

     // observables 
     ko.mapping.fromJS(data, {}, self); 

     // computeds 
     self.HrefDetailsPage = ko.computed(function() { 
      return parent.invtype + '/' + data.Id; 
     }); 

     self.selectedItem = ko.observable(); 
     self.setSelectedItem = function() { 
      console.dir(this); 
      self.selectedItem(this); 
     }; 
     self.getDetails = function (details) { 
      self.selectedItem(details); 
      //console.dir(self.selectedItem); 
      return details; // self.selectedItem(); 
     } 
    } 
    // --------------------------------------------------------------------------- 

    function ViewModel() { 
     var self = this; 

     // raw values 
     self.invtype = "@ViewBag.invtype"; //"Pavement"; 

     // observables 
     self.columns = ko.observableArray(); 
     self.rows = ko.observableArray(); 

     // computeds 
     self.visibleColumns = ko.computed(function() { 
      return ko.utils.arrayFilter(self.columns(), function (column) { 
       return column.isVisible; 
      }); 
     }); 

     // methods 

     self.load = function() { 
      $.when(
      // use two plain $.get() calls to your API resources here 
      // the $.post() is required only for the mock-up in jsFiddle 
      $.post("/echo/json/", { 
       json: JSON.stringify(columnDefs) 
      }), 
      $.post("/echo/json/", { 
       json: JSON.stringify(rowDefs) 
      })) 
       .then(function (columnResponse, rowResponse) { 
       var columnDefs = columnResponse[0], 
        rowDefs = rowResponse[0], 
        columnMapping = { 
         key: function (data) { 
          return ko.utils.unwrapObservable(data.ColumnName); 
         }, 
         create: function (options) { 
          return new HeaderViewModel(options.data, self); 
         } 
        }, 
        rowMapping = { 
         key: function (data) { 
          return ko.utils.unwrapObservable(data.Id); 
         }, 
         create: function (options) { 
          return new RowViewModel(options.data, self); 
         } 
        }; 

       ko.mapping.fromJS(columnDefs, columnMapping, self.columns); 
       ko.mapping.fromJS(rowDefs, rowMapping, self.rows); 
      }); 

      return self; 
     }; 
    } 
    // --------------------------------------------------------------------------- 

    ko.applyBindings(new ViewModel().load()); 


     </script> 

// HTML一個問題的延續部分 - UI

<div class="details" data-bind="visible:rows.selectedItem"> 
    <div data-bind="with: rows.selectedItem"> 
      details data....... 
      <pre data-bind="text: JSON.stringify(ko.toJSON($data))"></pre> 
      <input data-bind="value:Id" /> 

      <!-- TODO dynamicly output label and data from the viewmodel --> 

      <b>ID:</b> <span data-bind="text: Id"></span> 
      <b>ACX Name:</b> <span data-bind="text:ACX_Name"></span> 
      <b>Inv ID:</b> <span data-bind="text:ACX_Name"></span> 

     </div> 
    </div> 
    <div data-bind="visible: rows.selectedItem == null"> 
     No selection was made 
    </div> 
    <div id="listPlaceholder"> 
     <table> 
     <thead> 
      <tr> 
       <th>Link</th> 
       <!-- ko foreach: $root.visibleColumns --> 
       <th data-bind="text: HeaderName, visible: Visible"></th> 
       <!-- /ko --> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: $root.rows"> 
      <tr data-bind="click: $data.setSelectedItem"> 
       <td><a href="" data-bind="attr: {href: HrefDetailsPage}">Details</a></td> 
       <!-- ko foreach: $root.visibleColumns --> 
       <td data-bind="text: $parent[ColumnName()], visible: Visible"></td> 
       <!-- /ko --> 
      </tr> 
     </tbody> 
     </table> 

    </div> 

與上述代碼我在 self.setSelectedItem seing數據=函數（）{ console.dir（本） ; self.selectedItem（this）; };

我想在段

沙箱輸出在細節這樣的數據：（http://jsfiddle.net/sigibb/tq55u/）

Answer 1

SelectedItem屬性是沒有道理的，以便將其移動到ViewModel類。 現在，如果你點擊一行，其細節將顯示在頂部。

See fiddle

function ViewModel() { 
    var self = this; 
    self.selectedItem = ko.observable(null); 
} 
<div data-bind="with: selectedItem">test <pre data-bind="text: JSON.stringify(ko.toJSON($data))"></pre> 
    <input data-bind="value:Id" /> <b>ID:</b> <span data-bind="text: Id"></span> 
</div> 

編輯：

對不起SiGagan。當我看到html的頂部的細節div時，我認爲你只需要所有行的一個細節。 我更新了小提琴，以獲得主人和detais視圖。

See new Fiddle

我希望它能幫助。