Question

当在集合上触发的计时器获取（仅更改）属性的子集时，尝试更新表视图中的某些列。尝试了谷歌的各种代码，但没有运气。

希望仅更新名称和名称之外的年龄属性，而不是要重新呈现整个视图。

这是我的代码

<div class='mainBody'>
        <table class="table">
            <tr class="success">
                <td>Name</td>
                <td>Age</td>
                <td>Ocupation</td>
            </tr>
        </table>
    </div>

    <script id="externalViewTemplate" type="text/template">

            <td width='25%'> <%= name %> </td>
            <td width='25%' id="age"> <%= age %> </td>
            <td width='25%'> <%= occupation %> </td>
    </script>

脚本：

    //Person Model
var PersonModel = Backbone.Model.extend({
    _id:"id"
});

//Person collection - People
var PeopleCollection = Backbone.Collection.extend({
    model: PersonModel,
    view: PeopleView,
    initialize: function(){
        this.updateAge = setInterval(this.getAge.bind(this), 3000);
    },

    getAge: function()
    {
        var per = [{
                        id:1,
                        age: 31
                    },
                    {
                        id:2,
                        age: 32
                    },
                    {
                        id:3,
                        age: 37
                    }];
        this.reset(per);          
    }
});

//Person view - Responsible for rendering one person
var PersonView = Backbone.View.extend({
    tagName: 'tr',
    template: _.template( $('#externalViewTemplate').html() ),
    initialize: function() {
        this.model.on("change:age", this.update, this);
    },

    update: function() {
        this.el.cells["age"].innerHTML = this.model.get("age");
    },

    render: function(){
        this.$el.append(this.template(this.model.toJSON()));
        //console.log(this.$el.find('.edit'));
        return this;
    }
});

//person view collection - rendering the rows collection
var PeopleView = Backbone.View.extend({
    view: PersonView,
    initialize: function(options){
        this.collection = options.collection,
        this.collection.on("reset", this.update, this);
    },
    render: function(){
        this.collection.each(function(person){
            var personRow = new PersonView({model: person});
            this.$el.append(personRow.render().el);
        }, this);
    },

    update: function(){
        this.collection.each(function(person){
            //var personRow = new PersonView({model: person});
            this.model.age = person.age;
        }, this);
    }
});


//Try this code

var personCollection = new PeopleCollection([
    {
        id:1,
        name: 'Raju',
        age: 31,
        occupation: 'Dotnet Programmer'
    },
    {
        id:2,
        name: 'Rajesh',
        age: 32,
        occupation: 'Developer'
    },
    {
        id:3,
        name: 'Ramesh',
        age: 33,
        occupation: 'Designer'
    }
]
);

var peopleList = new PeopleView({ el: '.table', collection: personCollection});
peopleList.render();

希望仅更新名称和名称之外的年龄属性，而不是要重新呈现整个视图。

Answer 1

根据<tr> - MDN cells属性返回HTMLCollection。您更新单元格的代码应为

update: function() {
    this.el.cells.namedItem("age").innerHTML = this.model.get("age");
    // or this.el.cells.item(1).innerHTML = this.model.get("age");
    // this.el.cells[1].innerHTML = this.model.get("age"); might work
},

由于你很可能拥有带有主干的jQuery，你可以做到

this.$el.find(".age").text(this.model.get("age"));

请注意，我使用className＆＃34;年龄＆＃34;因为你不应该在复制的模板中使用id。您还可以使用index()，eq()等使用jQuery代替className

来访问单元格

部分使用集合中的计时器更新主干视图并获取模型的子集

1 个答案: