使用数据属性

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

传递给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 View。

制作一个处理数据的模型：

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和vanilla Backbone，有多个例子已经可用（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元素信息

2 个答案:

使用数据属性

处理列表元素的骨干方式