從表中選擇與淘汰js的填充表格

Question

我有一個表中的值的列表與編輯按鈕使用knockout.js，當編輯按鈕被點擊時，我想列表上方的形式填充值來自表。我如何用我目前的淘汰賽視角模型做到這一點？

這裏的HTML

<script src="~/scripts/appjs/GeneAssay.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     //Dump raw data into one place 
     var data = @Html.Raw(ViewBag.Data); 

     //initialize view model 
     var viewModel = new ViewModel(data); 
     ko.applyBindings(viewModel); 
    }); 
</script> 
<div class="row geneassayform"> 
<div class="col-md-4"> 
    <form> 
     <div class="form-group"> 
      <label for="form_geneassaycode">Gene Assay Code:</label> 
      <input type="text" class="form-control" id="form_geneassaycode" placeholder="Enter Gene Assay Code">   
     </div> 
     <div class="form-group"> 
      <label for="form_geneassayname">Gene Assay Name:</label> 
      <input type="text" class="form-control" id="form_geneassayname" placeholder="Enter Gene Assay Name">   
     </div> 
     <div class="form-group"> 
      <label for="form_geneassaycomments">Gene Assay Comments:</label>   
      <textarea class="form-control" id="form_geneassaycomments" placeholder="Enter Gene Assay Comments(optional)"></textarea> 
     </div> 
     <button type="submit" class="btn btn-primary" disabled="disabled">Save</button>  
    </form> 
</div> 
</div> 
<div class="row"> 
<div class="col-md-6"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <span>Current Gene Assays</span> 
     </div> 
     <div class="panel-body"> 
      <!-- ko if: Assays().length > 0 -->     
       <table class="table table-condensed table-hover"> 
        <tr> 
         <th>Assay Code</th> 
         <th>Assay Name</th> 
         <th>Comments</th>   
         <th></th> 
        </tr>     
        <tbody> 
         <!-- ko foreach: Assays --> 
         <tr> 
          <td data-bind="text: AssayCode"></td> 
          <td data-bind="text: AssayName"></td> 
          <td data-bind="text: Comments"></td>    
          <td><button class="btn btn-xs btn-danger" data-bind="click:  $parent.editAssay">edit</button></td> 
         </tr> 
         <!-- /ko --> 
        </tbody>     
       </table> 
      <!-- /ko --> 
      <!-- ko ifnot: Assays().length > 0 --> 
      <div class="alert alert-info"> 
       <p>There are no Gene Assays. Add an Assay using the form above.</p> 
      </div> 
      <!-- /ko --> 
     </div> 
    </div> 
</div> 

這裏的GeneAssay.js

function ViewModel(data) { 
var self = this; 

//Unpack raw data 
self.Assays = ko.mapping.fromJS(data.assays);  

} 

Answer 1

到這樣做的關鍵是擁有一個selectedAssay對象爲您的視圖模型的一部分並綁定到編輯按鈕點擊：

var assayData = '[{"AssayCode":"0001C","AssayName":"Assay A","Comments":"Here is the comment"},{"AssayCode":"0002D","AssayName":"Assay B","Comments":"Here is the comment for assay b"}]'; 

console.log(assayData); 

//using the ko.mapping.fromJSON to make your rawData properties into observables, so the list updates with any changes 
//download from http://knockoutjs.com/documentation/plugins-mapping.html 
var assays = ko.mapping.fromJSON(assayData); 
console.log(assays()); 
var viewModel ={}; 

var selectedAssay=ko.observable(); //initialize the selectedAssay which will be set by the edit button click, but we need to initialize it first 


//just for debugging, subscribe to the selectedAssay so we can see when it's been changed 
selectedAssay.subscribe(function(){ 
    console.log('selected assay changed'); 
    console.log(selectedAssay().AssayName()); 
}); 

var addNewAssay=function(){ 
    //create a new Assay initializing each property to a ko.observable so the data in the list updates when the data changes in the edit screen 
    var newAssay ={"AssayCode":ko.observable(""),"AssayName":ko.observable(""),"Comments":ko.observable("")}; 
    assays.push(newAssay); 
    selectedAssay(newAssay); 
} 

viewModel.Assays=assays; 
viewModel.selectedAssay=selectedAssay; 
viewModel.addNewAssay=addNewAssay; 

ko.applyBindings(viewModel); 

這是一個fidd樂展示瞭如何使用

http://jsfiddle.net/jiggle/2cr2f/

我添加了一個「添加新的檢測」按鈕，有線高達視圖模型一個addNewAssay功能，讓你在那裏開始。

默認情況下，啓動時會創建一個新的化驗（空白字段），並在編輯表單中設置（因此您可以開始在新的化驗中輸入數據）。

另一種選擇是使用基因敲除「與」結合（http://knockoutjs.com/documentation/with-binding.html），只顯示編輯表單時，有一個selectedAssay（無論是新的，或者用戶點擊編輯）：

<form data-bind="with:selectedAssay"> 
    <div class="form-group" > 
     <div><span class="h1" data-bind="text:AssayName"></span></div> 
     <label for="form_geneassaycode">Gene Assay Code:</label> 
     <input type="text" class="form-control" id="form_geneassaycode" placeholder="Enter Gene Assay Code" data-bind="value:AssayCode"/>   

etc. 

這裏的另一小提琴證明方式：

http://jsfiddle.net/jiggle/Meke2/1/

希望幫助讓你感動？

Answer 2

好吧，這裏是我會怎麼做。

// create an object 
var Assay = function (AssayCode, AssayName, Comments) { 
     self = this; 
     self.AssayCode = AssayCode; 
     self.AssayName = AssayName; 
     self.Comments = Comments; 
    } 

    // create a mapping 
    var mapping = { 
     'Assays': { 
      create: function(options) { 
       return new Assay(options.data.AssayCode, options.data.AssayName, options.data.Comments); 
      } 
     } 
    } 

    // Create the view model 
    function AViewModel() 
    { 
     var self = this; 
     self.Assays = ko.observableArray(); 
     self.editAssay = ko.observable(new Assay()); 

    // populate and map the Assays 
    $.ajax({ 
     url:"/echo/json/", 
     data:data, 
     type:"POST", 
     success:function(response) 
     { 
     self.Assays = ko.mapping.fromJS(response, mapping, self); 
     } 
    }); 


} 

var viewModel = new AViewModel(); 
ko.applyBindings(viewModel); 

綁定您editAssay使用data-bind="with:editAssay"和編輯形式元素具有值即data-bind="value: AssayCode"。

選擇編輯已經是正確的，即data-bind="click: $parent.editAssay"

工作的jsfiddle與嘲笑JSON呼籲演示目的：

http://jsfiddle.net/hutchonoid/Tnyqp/13/