Javascript 将事件绑定到视图'；动态渲染视图后的el //这是父div模板（在实例化视图之前已经存在于DOM中）

HTML模板：

<div class="container"> // this is the parent div template (already existing in the DOM prior to instantiating the View

//数字是动态的
不要弄乱这个.el

。让主干为您定义视图的元素就行了

在模板中，省略最外面的

标记，因为它将是主干标记

在

render

中，只需设置所需的ID即可

---

---

您可以使用

id:function（）{返回this.model.id}

而不是在

渲染中手工操作：@Peter Lyons@PeterLyons您说
视图将自身附加到DOM是一个反模式，那么您如何建议添加视图？由它的父级添加？也许我对这个结构太陌生，所以任何详细解释这一点的链接都会很感激。T谢谢你的帮助！把视图想象成一个可重用的组件。比如一个小部件，比如一个选择框或日历日期选择器。它应该能够处理一个且只有一个父文档吗？它应该规定它的父选择器是什么吗？视图应该由路由器在直主干或父视图或一些布局管理器/区域中附加到DOM中组件，如果使用类似backbone.marionete的东西。
  <div id="measure-cid1"> // the number is dynamic
    <div class="row-fluid">
      <div class="remove-measure-rep"><i class="icon-minus"</i></div>
    </div>
    …other stuff…
  </div>
  <div id="measure-cid2">
    <div class="row-fluid">
      <div class="remove-measure-rep"><i class="icon-minus"</i></div>
    </div>
    …other stuff…
  </div>
  … multiple other 'measure-cid*'s
// remaining portion from the parent div template
</div>

define([…], …){ //using require
  return Backbone.View.extend({
    // I can not define the el here, as it is dynamic, so I have to set it in the init
    events : {
      'click .remove-measure-rep' : 'removeRepresentation',
      'click' : 'removeRepresentation'
    },
    initialize: function(options){
      if (options) {
        //passing options.* to this view as this.*
        for (var key in options) {
          this[key] = options[key];
        }
        console.log(this.el); // I get `<div></div>`
        this.el = '#measure-rep-'+this.measureRepModel.cid;
        console.log(this.el); // This returns `#measure-rep-c28`
        this._ensureElement();
        console.log(this.el); //This returns `undefined`
        this._ensureElement($('#measure-rep-'+this.measureRepModel.cid));
        console.log(this.el); //this returns `<div></div>`
        this.setElement($('#measure-rep-'+this.measureRepModel.cid));
        console.log(this.el); // this returns `undefined`
      }

      //Dispatch listeners
      …  
      //Binding  
      this.model.bind('change', _.bind(this.render, this));

      this.render();
    },
    render: function(){
      // I attach the template to its parent div 
      var compiledTemplate = _.template( MeasureRepTemplate, measureRepTemplateParamaters );
      // put in the rendered template in the measure-rep-container of the measure
      $(this.repContainerEl).append( compiledTemplate );

    },
    removeRepresentation: function(ev){
      console.log('getting here');
    }
  })
};

Backbone.View.extend({
    events : {
      'click .remove-measure-rep' : 'removeRepresentation',
      'click' : 'removeRepresentation'
    },
    initialize: function(options){
      if (options) {
        //passing options.* to this view as this.*
        for (var key in options) {
          this[key] = options[key];
        }
        //don't mess with this.el at all
      }

      //Dispatch listeners
      …  
      //Binding
      //better to use listenTo here
      this.listenTo(this.model, 'change', _.bind(this.render, this));  
      //I think initialize calling render is an antipattern. Discouraged.
      this.render();
    },
    render: function(){
      //Here you can set your dynamic ID
      this.$el.attr('id', 'measure-cid' + this.model.id);
      // I attach the template to its parent div 
      var compiledTemplate = _.template( MeasureRepTemplate, measureRepTemplateParamaters );
      // put in the rendered template in the measure-rep-container of the measure
      //view's appending themselves to the DOM is also an antipattern in my book, but anyway..
      $(this.repContainerEl).append( compiledTemplate );

    },
    removeRepresentation: function(ev){
      console.log('getting here');
    }
  })
};