Javascript 将模型视图附加到主干中的现有DIV

需要帮助，无法理解如何将模型的每个视图附加到DOM中已经存在的每个DIV（have和DIV.container以及DIV.widget数组）

加载Iframe时，将存储从服务器推送到集合：

$('#preview').on('load', function() {

var ShortcodesCollection = new V.Collections.Shortcodes( Vision.ShortcodeStorage );

var Preview = new V.Views.Preview({
    collection: ShortcodesCollection,
    el: $('.container')
});

Preview.render();

});

使用集合进行渲染预览：

// Collection View in iframe
V.Views.Preview = Backbone.View.extend({

initialize: function() {
  this.collection.on('add', this.addOne, this);
},

render: function() {
  this.collection.each(this.addOne, this);
  return this;
},

addOne: function(ad) {
  var shortcodeView = new V.Views.Shortcode({ model: ad });
  shortcodeView.render();
}
});

// Shortcode View
V.Views.Shortcode = Backbone.View.extend({
 events: {
    'click .widget' : 'SomeActionOnView'
 },

 render: function(){
    //console.log(this.el);
    //console.log(this.model.toJSON());
 },

 SomeActionOnView: function(){
    console.log(this);
 }
 });

每个型号的视图：

// Collection View in iframe
V.Views.Preview = Backbone.View.extend({

initialize: function() {
  this.collection.on('add', this.addOne, this);
},

render: function() {
  this.collection.each(this.addOne, this);
  return this;
},

addOne: function(ad) {
  var shortcodeView = new V.Views.Shortcode({ model: ad });
  shortcodeView.render();
}
});

// Shortcode View
V.Views.Shortcode = Backbone.View.extend({
 events: {
    'click .widget' : 'SomeActionOnView'
 },

 render: function(){
    //console.log(this.el);
    //console.log(this.model.toJSON());
 },

 SomeActionOnView: function(){
    console.log(this);
 }
 });

---

问题是，如何使用“widget”类将V.Views.Shortcode附加到每个div以绑定事件。谢谢

你能试试这个吗

V.Views.Shortcode = Backbone.View.extend({
     events: {
        'click .widget' : 'SomeActionOnView'
     },

     render: function(){
      //code here to write stuff of this.$el
       $("div.widget").append(this.$el);
     },

     SomeActionOnView: function(){
        console.log(this);
     }
     });

---

是否要使用类“widget”附加div下的所有视图？@Nitesh要将每个视图附加到每个视图。widget是否需要为每个视图创建一个新的div.widget？@Nitesh否，所有div.widget都已存在于文档的DOM中。准备好了，我不明白如何将视图附加到已存在的div.widget上有什么问题吗$（“div.widget”）。追加（本$el）；请稍等，will tryIt将仅在div.widget内附加当前视图。如果您的UI上有div.widget div，您将看到视图出现在那里。这是一个主干视图。如果你想返回当前视图，你可以在末尾写上return。它只是返回div和div上下文，而不是div.widget（使用“return this；”类似的情况）：为什么你需要返回div.widget？在此渲染函数中，您已经将视图附加到div.widget中。现在，无论您在哪里访问$（“div.widget”），您的内容都已可用。另外，您应该只从render返回这个，而不是其他任何东西。在这段代码中，您的答案不起作用，“click”事件在我的“V.Views.Shortcode”中不起作用，这不会返回任何内容，我需要返回div.widget来添加事件以更改我的DOM