骨干模板内的DOM元素不响应事件

Question

I have 2 Backbone views. One view (AppView) represents the entire collection and when it fetches it, parses the collection and generates the individual model views for each model in the collection.

The one issue I'm having is when the model views are created, they no longer respond to my click event which is a method of the model view. In the model view, if I replace tagName with el , the event can fire, however it fires for every single model in the collection instead of the individual model.

I think it has something to do with the events being untied from the template on load but I can't figure out how to tie back in, or generate the template without untying them.

// INDIVIDUAL ITEMS WITHIN THE VIEW
ModelView = Backbone.View.extend({
// el: '#item-block', // click event shows an action for all 20 models within the collection
tagName: '.item-wrapper', // click event not heard
template: _.template($('#template').html()),
events: {
    'click.details': 'fireModel', // .details is a div inside of the template
},
initialize: function () {

    // _.bindAll(this, 'render', 'fireModel');
    this.render();

},
render: function() {

    var holder   = $('#item-block');

    if(this.model.attributes.caption == null) {
        var cloned = _.clone(this.model.get('caption'));

        cloned = {};
        cloned.text = '';

        this.model.set('caption', cloned);
    }

    holder.append(this.template(this.model.toJSON()));

    // this.delegateEvents()

    // return this;

},
fireModel: function(e) {

    console.log('clicked');

},
});


// COLLECTION GENERATES INDIVIDUAL MODEL VIEW
AppView = Backbone.View.extend({
el: '#social',
events: {
    'click #load-more': 'fetchCollection'
},
initialize: function() {
    this.collection = new MyCollection();

    this.collection.on('sync', this.render, this);

    this.collection.fetchData();
},
render: function() {

    for (var i = 0; i < this.collection.cache.models.length; i ++) {
        modelView = new ModelView({model: this.collection.cache.models[i]});
    }

},
fetchCollection: function() {
    this.collection.fetchData();
},

});

// CREATE NEW COLLECTION
app = new AppView

Here's the template

<section id="social">

<div id="item-block">   
</div>

<div id="load-more">Load More</div>

</section>

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

<div class="item-wrapper">
    <div class="details">
        <span class="caption"><%= caption.text %></span>
    </div>
    <div class="image">
        <img src="<%= images.standard_resolution.url %>" data-id="<%= id %>">
    </div>
</div>

</script>

<!-- JS LIBS AND BACKBONE SCRIPTS HERE -->

Answer 1

A few things to note:

First , I want to mention that tagName property of Backbone.View should be the name of the HTML element ( div , ul , ...., by default it's div ).

Second , you attaching your modelView (childView) to appView from model view. It's can be implemented in a better manner. Move that logic to the appView (parentView).

Third , use Underscore.js 's each method instead of for loop.

Use documentFragment to cache the childViews and append it at once, instead of one by one (performance optimization).

And the final look should be:

ModelView = Backbone.View.extend({
    template: _.template($('#template').html()),
    attributes: {
       'class': 'item-wrapper'
    },
    events: {
        'click .details': 'fireModel', // .details is a div inside of the template
    },
    initialize: function () {
        this.render();
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    fireModel: function(e) {
        console.log('clicked');
    },
});


// COLLECTION GENERATES INDIVIDUAL MODEL VIEW
AppView = Backbone.View.extend({
el: '#social',
events: {
    'click #load-more': 'fetchCollection'
},
initialize: function() {
    this.collection = new MyCollection();
    this.collection.on('sync', this.render, this);
    this.collection.fetchData();
},
render: function() {
    var buffer = document.createDocumentFragment();
    this.collection.each(function(model){
        if(model.attributes.caption == null) {
            // do your checks here
        } 
        var itemView = new ModelView({model: model});
        buffer.appendChild(itemView.render().el); // adding it to buffer   
    });

    this.$el.append(buffer); // appending all at once
}
});

// CREATE NEW COLLECTION
app = new AppView();

Update

In this way any time collection's sync event fired, it will append new itemViews to the parentView, so be sure to add checks there.

Answer 2

Maybe you should insert some space between the event and the selector.

try

'click .details': 'fireModel'