How to set the tagName of an Ember component based data in the model?

Question

I would like to set the tagName of an ember component based on data in the model like this:

App.TestComponent = Ember.Component.extend({
    tagName: function(){return this.get('tag');}.property('tag')
});

This doesn't work though. The W3C specifies that you can't change the tagName of an element, so I can see why binding a variable to a static property would be problematic - just not sure how to accomplish this.

Any ideas?

Answer 1

Use tagName

{{test-foo tagName=item}}

http://emberjs.jsbin.com/molamohi/1/edit

Answer 2

http://emberjs.jsbin.com/vowur/3/edit shows how to set the tagName of a Component based on a property in a model object. Specifically:

{{test-component someVal=model.val tagName=model.tag}}