点击事件获取ui个元素信息

Question

我在我的 Marionette 视图中设置了引用 class 的 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

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

...,

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

...

Answer 2

使用数据属性

将属性名称放入呈现的 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.
},

Backbone 处理列表元素的方式

如果可能与由模型表示（或可以由模型表示）的列表元素进行任何交互，则每个元素都应该是一个 Backbone 视图。

创建一个模型来处理数据：

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

将每个 Quote 属性放入一个集合中：

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 and with vanilla Backbone, there are multiple example already available (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');
    }
});

点击事件获取ui个元素信息

Get ui element information on click event

javascript

backbone.js

marionette

使用数据属性

Backbone 处理列表元素的方式