Javascript 动态设置子视图$el并触发主干事件

我有一个父视图（和关联模型），其中有几个子视图具有相同的关联模型。父视图是从HTML静态定义的。这些活动进展顺利

子视图是动态创建的，它们最终是不同的，但具有一些相似的初始结构。#id将彼此不同（使用视图id号），以便我们可以知道用户与哪个id交互。我在阅读中尝试了以下几点：

• 在创建视图时添加

  el

  声明（在JS末尾）
• 静态地定义它，然后尝试更新它
• 使用

  \u.ensureElement（）

• 在

  init（）中设置el

但我似乎无法让孩子们在小提琴上看到它

JS：家长

  //The view for our measure
  parentModule.View = Backbone.View.extend({
    //
    //This one is static, so I can set it directly, no problem, the events are working
    //
    el: $('#measure-container'),
    events: {
        'click .test': 'test'
    },
    test: function(){
      alert('test');
    },
    initialize: function() {
      this.template = _.template($('#instrument-template').html());
    },
    render: function(){
      $(this.el).append(this.template(this.model.toJSON()));
      return this;
    }
  });

  return parentModule;
});

JS：孩子

  // THe child views are dynamic, so how do I set their id's dynamicall and still get the click events to fire?
  //
  childModule.View = Backbone.View.extend({
    //
    // Do I set the el here statically then override?
    //
    events: {
      'click .remove-rep' : 'removeRepresentation',
      'click .toggle-rep' : 'toggleRepType',
      'click .sAlert': 'showAlert'
    },
    initialize: function(options) {
      //
      //Do I set the el here using ensure_element?
      //
      this.model=options.model;
    },
    render: function(){
      //
      // Do I Set it here when it renders?
      //

      this.template = _.template($('#rep-template').html());
      $('#measure-rep-container').append(this.template());
      return this;
    },
    showAlert: function() {
      alert("This is an alert!");
    }
  });

JS：实例化

define( "app", ["jquery", "backbone", "parentModule", "childModule"], function($, Backbone, ParentModule, ChildModule) {    
  var app = {};
    app.model = new ParentModule.Model({ name: "Snare", numOfBeats: 4 });
    app.view = new ParentModule.View({ model: app.model });
    app.view.render();

    app.firstRepChildModel = new ChildModule.Model({ id: 1, type: 'circle', parentModel: app.model });
    // 
    // Do I add the el as a parameter when creating the view?
    // 
    app.firstRepChildView = new ChildModule.View({ el:'#rep'+app.firstRepChildModel.get('id'), model: app.firstRepChildModel });
    app.firstRepChildView.render();

    app.secondRepChildModel = new ChildModule.Model({ id: 2, type: 'line', parentModel: app.model });
    // 
    // Do I add the el as a parameter when creating the view?
    // 
    app.secondRepChildView = new ChildModule.View({ el:'#rep'+app.secondRepChildModel.id, model: app.secondRepChildModel });
    app.secondRepChildView.render();
  return app;
});

HTML:

测量视图
我是一种乐器。我的名字是

以下是我的孩子们的观点：

添加代表
我是一个repView

我的ID是“代表”

我的el是“”

我的类型是“”

我有这么多节拍“

删除此代表
切换代表类型
显示警惕

每个视图都有一个关联的

el

，无论您是否直接设置它，如果您不设置它，那么它的

el

只是一个空div

在代码中，您没有修改子视图的

el

或将其附加到

DOM

试试下面的方法

render: function(){

  this.template = _.template($('#rep-template').html());
  //this sets the content of the el, however it still isn't attached to the DOM
  this.$el.html(this.template()); 
  $('#measure-rep-container').append(this.el);
  return this;
},

更新

另外一点是，如果要多次重用同一个模板，您可能只需要编译一次，例如

childModule.View = Backbone.View.extend({

events: {
  'click .remove-rep' : 'removeRepresentation',
  'click .toggle-rep' : 'toggleRepType',
  'click .sAlert': 'showAlert'
},

//get's called once regardless of how many child views you have
template: _.template($('#rep-template').html()), 

render: function(){
  this.$el.html(this.template()); 
  $('#measure-rep-container').append(this.el);
  return this;
},

---

试着把有问题的问题隔离开来code@Blaine它在requireJs环境中尽可能多。有关问题的位置，请参见注释。但这些视图不是动态的。您只调用了

#rep-template

，而不是像

#rep-template-dynamicNumber1

或

#rep-template-dynamicNumber32

，因此我将唯一标识符附加到DOM IDI的原因我不确定您要做什么，但如果您传入

el

，那么该元素必须在该点存在于页面上，如果需要唯一的id，可以始终从视图中分配id。我已经更新了fiddle以进行说明。此外，您可能希望父视图创建子视图并附加它们，如下所示，因此您使用快捷方式

$el

获取jquery元素（实例化时，它只是空div），然后在其上设置

id

。然后编译模板，并将编译后的模板放入子视图中，然后将其附加到它指定的位置。我想我是想把

id

放在编译过的模板中，所以我想这就是问题所在，对吧？从来没有听说过模板键，所以如果我想使用它，它是否必须在编译过的模板中具有所有相同的值，或者它们可以不同，只要HTML模板的结构相同？

childModule.View = Backbone.View.extend({

events: {
  'click .remove-rep' : 'removeRepresentation',
  'click .toggle-rep' : 'toggleRepType',
  'click .sAlert': 'showAlert'
},

//get's called once regardless of how many child views you have
template: _.template($('#rep-template').html()), 

render: function(){
  this.$el.html(this.template()); 
  $('#measure-rep-container').append(this.el);
  return this;
},