獲取單擊事件的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 
}, 

...