Question

我使用jquery get（）方法获取整个html代码并将其设置在骨干视图的el上。视图得到完美呈现，但我添加的点击事件未触发。由于我是骨干的新手，我无法找到问题。任何帮助将不胜感激。

currentTabID包含我想要渲染此html的div id。

view.js

var MyFirstView = Backbone.View.extend({

    currentTabID:'',

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

    render: function (){
        var self = this;
        self.el = self.options.currentTabID;
        $.get('resources/html/myBB.html', function(data) {
            $(self.el).html(_.template(data));
        });
        return this;
    },

    events: {
        'click .savebtnBB': 'invokeME'
      },

    invokeME: function (){
        console.log('Fired');
    }
});

Html看起来像下面的

myBB.html

<div id="sample_tab">
    <div class="sub-main">
        <form>
        ..
        </form>
    </div>
    <div class="button">
        <button class="savebtnBB">click me</button>
    </div>
</div>

Answer 1

view.el是一个实际的dom元素，用于保存视图的事件侦听器。您正在使用某个数字替换视图对该元素的引用，并将模板附加到其他元素。

您的观点应该尽可能地像一个孤立的单位。您将其附加到其他内容的代码应位于视图之外，您将在其中创建它。您的代码应如下所示：

var MyFirstView = Backbone.View.extend({
  initialize: function() {
    var self = this;
    $.get('resources/html/myBB.html', function(html) {
      self.template = _.template(html);
      this.render();
    });
  },
  events: {
    'click .savebtnBB': 'invokeME'
  },
  render: function() {
    this.$el.html(this.template({ /*some data for template*/ }));
  },
  invokeME: function() {
    console.log('Fired');
  }
});

var viewInstance = new MyFirstView();

/*append to whatever you want*/
$(currentTabID).append(viewInstance.el);

使用jquery get呈现Backbone视图时不会触发事件

1 个答案: