获取有关点击事件的 UI 元素信息

Question

我已经在我的木偶视图中设置了引用类的 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;
        });
    }
});

并在新的元素视图中渲染每个模型。有了木偶，有CollectionView，有了香草Backbone，已经有多个例子可用(这是我的一个(。

在该元素视图中，侦听对所需元素的单击。

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
},
...