javascript - InnerView 不响应其模板中的 DOM 事件

Question

问题:当我在另一个 View 的范围内创建 Backbone View 时，内部 View 不响应源自其模板内部的 DOM 事件，但是外部 View 正在响应这些事件。下面的例子中，innerview有一个提交按钮，但是只有outerview才会响应submitButton的点击

我正在制作一个 Backbone 项目，为路由器中的每个路由创建一个新的主视图，并且该主视图可能具有其页面不同部分的 subview 。例如，有一个创建 OrderView 页面的 order 路由

routes: {

            'order': 'orderProduct'
        },

orderProduct: function(){

            this.loadView(new OrderView()); 

        },

在OrderView的初始化函数中，我为OrderView创建了 subview ，例如formView。

 var OrderView = Backbone.View.extend({


        initialize: function(){
            $("body").html(this.el);
            this.template = _.template($('#order-template').html()),

            this.subViews = [];
            var formView = new FormView();
            this.subViews.push(formView);
            this.render();
        }, 

然后在 FormView 中，我创建明显的内容，例如提交按钮

 var FormView = Backbone.View.extend({
        el: '#forForm',

        initialize: function(){
            this.template = _.template($('#form-template').html());
        },
        events: {
            'click #submitButton' : 'submitForm',
            },

        submitForm: function(){
            ...
        },

        render: function(){

            $('#forForm').append(this.template());
            return this;

        } 
     });

表单已呈现到页面，但是当我单击提交时没有任何反应。然后，我向 OrderView 添加了事件处理程序和相应的函数 'click #submitButton' : 'submitForm', ，它响应了提交事件。所以我的问题是，当我在 OrderView 范围内创建 FormView 时，为什么 FormView 无法响应其模板范围内的事件？

表单模板

   <script type="text/template" id="form-template">
    <button id="submitButton">submit</button>
   </script>

更新:

我应该注意，附加表单模板(由内部 View 呈现)的 dom 元素包含在订单模板(外部 View )中。即使是这种情况，由于 FormView 响应的事件源自表单模板内的点击(即单击 SubmitButton 时)，我认为 FormView 能够响应这些事件。

<script type="text/template" id="order-template">
  <div class="container">

    <div class='row'>

      <div class="col-md-6">



     <div id="forForm">
     </div>



      </div> 
      <div class="col-md-6">

     ...ommitted...

      </div> 

  </div>

  </div>

</script>

Answer 1

我不确定我是否完全理解这个问题，但我会尝试通过解释一些逻辑来回答这个问题。

Backbone 依赖于 jquery on 来注册由 DOM 触发的事件。
这意味着，当您实例化 Backbone View 并定义其 events: {} 对象时，您的 View 将能够监听这些事件，并将 View 的 el 作为父元素到所有子元素的事件将冒泡的地方。

如果父 View 定义了一个 el 来包装 subview 上定义的 el，那么逻辑上这些事件将向上冒泡到最高父 View 。
如果父 View 还决定监视与内部 View 相同的子元素上的单击事件，则该事件将冒泡到最高的父元素，除非您决定结束 subview 的传播，您可以通过以下方式实现从处理 subview 中事件的方法中调用 $(event.currentTarget).stopPropagation() 。

我希望这是有道理的，并能帮助您解决问题。