Demo of assignment precedence in a {{component-tag}}

1

I wrote a test to see whether Ember respects the order that attributes are assigned in component / custom element tags. The resulting behaviour is exactly what I hoped to find, so I’m sharing the demo here.

http://jsbin.com/fehayaza/24/edit

Note a curious behaviour: If the same attribute is assigned more than once, then the position of the first assignment is what determines assignment precedence, although it is the rightmost value that gets used. e.g.:

{{test-this a='value1' d='overridesAll' a='value2'}}

The value assigned to a will first be 'value2', and then 'overridesAll'.

2

The string {{test-this a='value1' d='overridesAll' a='value2'}} will compile to the template

function anonymous(Handlebars,depth0,helpers,partials,data
/**/) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
  var helper, options, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;


  data.buffer.push(escapeExpression((helper = helpers['test-this'] || (depth0 && depth0['test-this']),options={hash:{
    'a': ("value1"),
    'd': ("overridesAll"),
    'a': ("value2")
  },hashTypes:{'a': "STRING",'d': "STRING",'a': "STRING"},hashContexts:{'a': depth0,'d': depth0,'a': depth0},contexts:[],types:[],data:data},helper ? helper.call(depth0, options) : helperMissing.call(depth0, "test-this", options))));
}

In particular, you can see that the Handlebars compiler does preserve the order and items of the hash. The issue thus boils down to the fact that JavaScript (typically?) enumerates keys in the order they were defined (in this case, the order they appear in the hash). Defining a key twice just sets the value twice.

tl;dr: this shares the same semantics as regular JavaScript hashes.

1 Like
3

Thanks a lot @mmun for this insight.