获取单击事件的UI元素信息

Question

我已经在我的Marionette视图中设置了引用类的ui元素，并且我想知道是否有方法获取有关哪个元素已精确点击的信息。我通常在这种情况下使用集合，它可以获取元素的索引，但是在这里很难设置。这是一个有难度值的例子。

查看：

var QuoteView = Marionette.View.extend({ 
    template: quoteViewTpl, 
    modelEvents: { 
    'change': 'render' 
    }, 
    ui:{ 
    'select_package': '.package' 
    }, 
    triggers:{ 
    'click @ui.select_package': 'select:package' 
    }, 
    onSelectPackage: function(){ 
    //how to know which element was selected? 
    } 
}); 

模板：

<%for(prop in obj){%> 
     <div class="col-xs-<%=Math.round(8/(Object.keys(obj).length-1))%>"> 
      <div class="quotation-rate-value package"> 
       <%=obj.y%> €/year 
      </div> 
     </div> 

<%}%> 

型号：

var Quote = Backbone.Model.extend({ 
    defaults:{ 
     obj: { 
      assist: { 
       y: 220, 
       m: 18.33, 
       d: 0.60 
      }, 
      fire: { 
       y: 330, 
       m: 27.5, 
       d: 0.90 
      }, 
      loan: { 
       y: 660, 
       m: 54.99, 
       d: 1.80 
      }, 
      disability: { 
       y: 440, 
       m: 36.66, 
       d: 1.20 
      }, 
     } 
    } 
}); 

Answer 1

使用数据属性

把属性名中呈现的HTML。

<% for (var prop in obj) { %> 
    <div class="col-xs-<%= Math.round(8/(Object.keys(obj).length-1)) %>"> 
     <div class="quotation-rate-value package" data-prop="<%= prop %>"> 
      <%= obj[prop].y %> €/year 
     </div> 
    </div> 

<% } %> 

然后使用jQuery，获取数据值。的处理列表元素

如果有任何相互作用可能与是（或可以）由模型表示的列表的元素

onSelectPackage: function(e) { 
    $(e.currentTarget).data('prop'); // 'assist', 'fire', etc. 
}, 

骨干方式，每个元素应该是骨干视图。

做一个模型，将处理数据：

var QuoteProperty = Backbone.Model.extend({ 
    defaults: { 
     propName: 'assist', 
     y: 0, 
     m: 0, 
     d: 0 
    } 
}); 

把每个报价的属性集合中：

var Quote = Backbone.Model.extend({ 
    defaults: function() { 
     return { 
      assist: { y: 220, m: 18.33, d: 0.60 }, 
      fire: { y: 330, m: 27.5, d: 0.90 }, 
      loan: { y: 660, m: 54.99, d: 1.80 }, 
      disability: { y: 440, m: 36.66, d: 1.20 }, 
     }; 
    }, 
    getPropertiesCollection: function() { 
     return _.reduce(this.attributes, function(collection, values, key) { 
      collection.push(_.extend({ propName: key }, values)); 
      return collection; 
     }); 
    } 
}); 

，并呈现一个新的元素视图每个模型。随着Marionnette，有CollectionView和香草骨干，已有多个示例（here's one of mine）。

在该元素视图中，监听点击您想要的元素。

var QuotePropertyElementView = Backbone.View.extend({ 
    template: _.template('<div class="quotation-rate-value package"><%= y %> €/year</div>'), 
    events: { 
     'click': 'onClick' 
    }, 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON)); 
     return this; 
    }, 
    onClick: function() { 
     this.model.trigger('custom:click:event', this.model); 
    } 
}); 

然后在原始视图中，侦听集合以处理来自属性的事件。

var QuoteView = Marionette.View.extend({ 
    initialize: function() { 
     this.listenTo(this.collection, 'custom:click:event', this.onSelectPackage); 
    }, 
    // rendering logic with CollectionView or custom 
    onSelectPackage: function(model) { 
     // model.get('y'); 
    } 
}); 

Answer 2

传递给你的onSelectPackage函数的第一个参数是事件对象。该对象可用于确定选择了哪个元素。例如：

..., 

onSelectPackage: function(e) { 
    var el = e.currentTarget; // .package element 
}, 

...