Knockout 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's 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 с сервера вы можете использовать KNOCKOUT в built-in JSON stuff, то mapping plugin или разобрать их самостоятельно. Я создал пример, используя последний вариант в this jsfiddle.