How do you assign a static data- attribute to an ember view?

Question

I need to assign a static data- attribute to an Ember.View, how do I set that in the View object instead of in the {{view }} tag.

App.MessagesFormView = Ember.View.extend({
  tagName: 'div',
  classNames: ['modal', 'fade'],
  didInsertElement: function() {
    this.$().modal('show')
  },
  willDestroyElement: function() {
    this.$().modal('hide')
  },
})

Answer 1

Unfortunately, I don't have enough reputation to comment on Ola's answer, but I believe a slightly better way to do this is to not use a string (text in quotation marks) to denote the data attribute property name. Instead, write your property name in camelCase and Ember will automatically bind it to the hyphenated attributebinding. For example:

App.MessagesFormView = Ember.View.extend({
  tagName: 'div',
  attributeBindings: ['data-backdrop'], 
  dataBackdrop: 'static', // Binds to data-backdrop. Awesome!
});

I hope that makes sense!

Answer 2

This has to be done using both an attributeBindings and data-backdrop or data-whatever property of the Ember.View object.

App.MessagesFormView = Ember.View.extend({
  tagName: 'div',
  classNames: ['modal', 'fade'],
  // Set a data attribute, of a view, requires both an attribute binding and
  // an attribute assignment
  attributeBindings: ['data-backdrop'],
  'data-backdrop': 'static',
  didInsertElement: function() {
    this.$().modal('show')
  },
  willDestroyElement: function() {
    this.$().modal('hide')
  },
})