Question

我是backbone.js的新手，只是想知道如何只在一个视图上发生点击事件？目前我添加了多个TimelineView，当我点击一个.delete时，它似乎提醒所有人的名字？

TimelineView = Backbone.View.extend({

    initialize: function(){
        this.render();
    },

    template: Handlebars.compile($("#timeline-template").html()),

    render: function(){
        var self = this;
        var output = self.template(self.model.toJSON());
        self.$el.append(output);
        return self;
    },

    events: {
        'click .property-name' : 'alertName',
        'click .delete' : 'deleteProperty'
    },

    alertName: function(e){
        var name = this.model.get("name");
        alert(name)
        console.log(e);
    },

    deleteProperty: function(e){
        var name = this.model.get("name");
        alert("Deleting " + name)
        this.model.destroy();
    },
});

编辑：

抱歉，我不知道这不仅仅是View控制它是如何工作的。

所以模型

var Timeline = Backbone.Model.extend({
    //object properties would go here
    initialize: function(){
        console.log('A new timeline has been created!');
        console.log(this.cid);
        this.on("change", function(){
            console.log('Timeline Changed:');
            console.log('Previous attributes: ' + JSON.stringify(this.previousAttributes()));
            console.log('New attributes: ' + JSON.stringify(this.attributes));

        });
    },
    defaults: {
        name: 'CSS property nice name',
        CSSProperty: 'CSS property name',
        prefixes: [],
    }

});

在他们之下如何添加它们：

var t = new Timeline({
    "name":"Foo",
});;
var q = new Timeline({
    "name":"Opacity",
    "CSSProperty":"opacity"
});
var r = new Timeline({
    "name":"Height",
    "CSSProperty":"height"
});
var a = new Animation;
var ts = new Timelines;

ts.add([t,q,r]);

var tv = new TimelineView({
    model: t,
    el: '#timelineView',
});

$("#addProperty").click(function(){
    console.log('added')
    var p = new Timeline({
        "name":"Pow",
        "CSSProperty":"awesome!"
    })
    var ts = new TimelineView({
        model: p,
        el: '#timelineView',
    })
})

这里的完整（垃圾）应用：http://djave.co.uk/hosted/stackoverflow/backbone/

Answer 1

在events对象中指定的侦听器仅绑定到此。$ el中包含的元素（您可以在视图中使用this.setElement（）进行设置）。将多个视图绑定到同一个元素将始终组合事件侦听器，这不是一个好习惯。您应该为每个视图设置此。$ el，以便为您的模型的把手生成html。

重写渲染功能可能会解决您的问题：

render: function(){
        var output = this.template(this.model.toJSON());
        this.setElement(output.appendTo($('#timelineView'))
        return this;
}

您可以像往常一样传递#timelineView容器并将其作为变量存储在视图中，但这可以确保每个视图仅限于表示其模型的部分，而不是整个视图容器。

Answer 2

您可以通过删除el参数来解决此问题：

var tv = new TimelineView({
    model: t,
    //el: '#timelineView',
});

$("#addProperty").click(function(){
    console.log('added')
    var p = new Timeline({
        "name":"Pow",
        "CSSProperty":"awesome!"
    })
    var ts = new TimelineView({
        model: p,
        //el: '#timelineView',
    })
})

并在您的视图中呈现：

render: function(){
    var self = this;
    var output = self.template(self.model.toJSON());
    self.$el.append(output);
    $('#timelineView').append(self.$el);
    return self;
},

类视图内的骨干点击事件

2 个答案: