使用淘汰赛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 对象作为 viewModel 的一部分并将其绑定到编辑按钮单击：

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

这是一个演示使用的小提琴

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

我在 viewModel 中添加了一个连接到 addNewAssay 函数的“Add new Assay”按钮，让您从那里开始。

默认情况下，在启动时会创建一个新的检测（空白字段），并在编辑表单中进行设置（因此您可以开始在新检测中输入数据）。

另一种选择是使用敲除“with”绑定 (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);

使用data-bind="with:editAssay" 绑定您的editAssay 和带有值的编辑表单元素，即data-bind="value: AssayCode"。

选择编辑已经正确，即data-bind="click: $parent.editAssay"

使用模拟 json 调用的 jsFiddle 用于演示目的：

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