CODEWITHSUNDEEP
javascriptember.js
Asfand Qazi
Asfand Qazi

Reputation: 6885

<script type="x-text/handlebars" always becomes an 'ember-view' as a div - how to make it a span?

Looking at this JS:

App = Ember.Application.create();

App.AView = Ember.View.extend({
    tagName: 'span',
    firstName: 'Joe',
    surname: 'Bloggs'
});

and this HTML:

<script type="text/x-handlebars">
    {{#view App.AView}}{{firstName}}{{/view}}
</script>
<script type="text/x-handlebars">
    {{#view App.AView}}{{surname}}{{/view}}
</script>

when rendered (as demonstrated in this jsfiddle: http://jsfiddle.net/r9svv/3/) displays:

Joe
Bloggs

I want them to appear on the same line, i.e. the '<script text="text/x-handlebars">' is becoming an ember view, and I need to set it to a 'span' rather than a 'div'. How do I do this?

Thanks

Upvotes: 2

Views: 1893

Answers (3)

Martin Algesten
Martin Algesten

Reputation: 13620

This tells ember to make an outer anonymous view with a nested inner AView.

<script type="text/x-handlebars">
    {{#view App.AView}}{{firstName}}{{/view}}
</script>

EDIT: You can change the tag name of such anonymous views. See below.

To ge the desired behaviour, I would avoid the outer anonymous by using named view templates. I'd create two views working off the same model. Here's an example.

http://jsfiddle.net/algesten/v8WD2/2/

App = Ember.Application.create();

App.model = Ember.Object.create({ // move data to model object
    firstName: 'Joe',
    surname: 'Bloggs'
});

App.AView = Ember.View.extend({ // make two named views
    tagName: 'span',
    templateName: 'first',
    model: App.model
});
App.BView = Ember.View.extend({
    tagName: 'span',
    templateName: 'last',
    model: App.model
});

// append the views
$(function() {
    App.AView.create().append();
    App.BView.create().append();
});

And the handlebars:

<script type="text/x-handlebars" data-template-name="first">
    {{model.firstName}}
</script>
<script type="text/x-handlebars" data-template-name="last">
    {{model.surname}}
</script>

EDIT: As pointed out by ebryn. The tag name can be changed on anonymous views.

<script type="text/x-handlebars" data-tag-name="span">
    {{#view App.AView}}{{firstName}}{{/view}}
</script>
<script type="text/x-handlebars" data-tag-name="span">
    {{#view App.AView}}{{surname}}{{/view}}
</script>

Upvotes: 0

ebryn
ebryn

Reputation: 4407

You can specify data-tag-name on the <script> tag:

<script type="text/x-handlebars" data-tag-name="span">
    {{#view App.AView}}{{firstName}}{{/view}}
</script>
<script type="text/x-handlebars" data-tag-name="span">
    {{#view App.AView}}{{surname}}{{/view}}
</script>

Upvotes: 5

voigtan
voigtan

Reputation: 9031

is it:

<script type="text/x-handlebars">
    {{#view App.AView}}{{firstName}} {{surname}}{{/view}}
</script>

that you are looking for?

Upvotes: 0

Related Questions