Search code examples
ember.jssproutcore

How do you specify the tag name for sproutcore/emberjs inline script templates?

Ember inline templates are wrapped in DIVs. I'd like to wrap them with a different tag. How do I do that?

The following template:

<script type="text/x-handlebars">
Foo
</script>

generates something like:

<div>Foo</div>

I'd like to generate something like:

<someOtherTag>Foo</someOtherTag>
Solution

  • I don't think that is possible in the current version 0.9.3 . If you look at https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js#L707 div is used when the property tagName is not set.

    You could define your own Ember.View and set the tagName but I guess you want to achieve this without creating your own view class.

    UPDATE

    I found a way via specifying your custom view as data-view attribute on the script element.

    <head>
    <script type="text/javascript" >
        App = Ember.Application.create({});
        App.View = Ember.View.extend({
            tagName: 'someOtherTag'
        });
    </script>
</head>
<body>
    <script type="text/x-handlebars" data-view="App.View" >
        Foo
    </script>
</body>

    See http://jsfiddle.net/9F7kR/2/