javascript - 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 オブジェクトから取得されます。反復パスのみを含めました