Knockout JS:绑定动态行

时间:2013-03-20 06:02:51

标签: javascript jquery dynamic knockout.js observable

我在绑定动态创建的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等的行。

我想将它们绑定为observables

代码

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对象获取的。我只包含了迭代路径

1 个答案:

答案 0 :(得分:5)

我建议使用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时,您可以使用Knockout的built-in JSON stuffmapping plugin或自己解析它们。我在this jsfiddle中使用后一个选项创建了一个示例。