淘汰赛JS：装订动态行

Question

我具有结合动态创建的DOM元素

一些麻烦

代码：

var i=0; 

$.each(data.info, function(index, element) {       
    $("#div1").append("<tr><td>" + element.Name + "</td><td>"+ element.Major +"</td><td>" + element.Sex +"</td><td>" + "<input data-bind='value: eng"+i+"' ></td><td>" + "<input data-bind='value: jap"+i+"' ></td><td>" + "<input data-bind='value: cal"+i+"' ></td><td>" + "<input data-bind='value: geo"+i+"' ></td><td>" + "<strong data-bind='text: total'></td>") 
i++; 
}); 

这产生与输入数据绑定值行eng0，ENG1，jap0，jap1等

我要绑定这些为可观测量

代码

function AppViewModel() { 
    this.eng = ko.observable(element.English); 
    this.jap = ko.observable(element.Japanese); 
    this.cal = ko.observable(element.Calculus); 
    this.geo = ko.observable(element.Geometry); 

    this.total = ko.computed(function() { 
    var tot=parseFloat(this.eng()) + parseFloat(this.jap()) + parseFloat(this.cal()) + parseFloat(this.geo()); 
    return (tot);  
    }, this); 

} 

    ko.applyBindings(new AppViewModel()); 

此代码也在里面$.each(data.info, function(index, element){}

我想要一些东西一样

Var i=0; 
$.each(data.info, function(index, element) { 

function AppViewModel() { 
     this.eng+i = ko.observable(element.English); 
     this.jap+i = ko.observable(element.Japanese); 
     this.cal+i = ko.observable(element.Calculus); 
     this.geo+i = ko.observable(element.Geometry); 

     this.total+i = ko.computed(function() { 
     var tot=parseFloat(this.eng()) + parseFloat(this.jap()) + parseFloat(this.cal()) + parseFloat(this.geo()); 
     return (tot);  
     }, this); 

    } 
i++; 
} 

这让我跟你造成this.eng0 = ko.observable()

注：从JSON对象获得的数据。我只包括迭代路径

Answer 1

我可以建议使用foreach binding可能比使用jQuery的each并自己生成HTML更好吗？我建议改变你的视图模式是这样的：

function AppViewModel() { 
    this.items = ko.observableArray(); 
} 

function ItemViewModel(element) { 
    this.eng = ko.observable(element.English); 
    this.jap = ko.observable(element.Japanese); 
    this.cal = ko.observable(element.Calculus); 
    this.geo = ko.observable(element.Geometry); 

    this.name = ko.observable(element.name); 
    this.major = ko.observable(element.major); 
    this.sex = ko.observable(element.sex); 

    this.total = ko.computed(function() { 
     var tot = parseFloat(this.eng()) + parseFloat(this.jap()) + parseFloat(this.cal()) + parseFloat(this.geo()); 
     return (tot); 
    }, this); 

}; 

这里，AppViewModel是元素列表中选择一个容器，每个要素本身ItemViewModel，你似乎有属性。

的HTML绑定，这将是这样的：

<table> 
    <tbody data-bind="foreach: items"> 
    <tr> 
     <td data-bind="text: name"></td> 
     <td data-bind="text: major"></td> 
     <td data-bind="text: sex"></td> 
     <td><input data-bind='value: eng' /></td> 
     <td><input data-bind='value: jap' /></td> 
     <td><input data-bind='value: cal' /></td> 
     <td><input data-bind='value: geo' /></td> 
     <td><strong data-bind='text: total' /></td> 
    </tr> 
    </tbody> 
</table> 

当您从服务器获取JSON可以使用淘汰赛的built-in JSON stuff的mapping plugin，或自己解析。我在this jsfiddle中使用后一个选项创建了一个示例。