时间:2012-03-11 21:47:46

标签: javascript ember.js

看看这个JS:

App = Ember.Application.create();

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

和这个HTML:

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

渲染时(如本jsfiddle所示:http://jsfiddle.net/r9svv/3/)显示:

Joe
Bloggs

我希望它们出现在同一条线上,即'<script text="text/x-handlebars">'正在成为一个余烬视图,我需要将它设置为'span'而不是'div'。我该怎么做?

由于

3 个答案:

答案 0 :(得分:5)

您可以在data-tag-name代码上指定<script>

<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>

答案 1 :(得分:0)

是吗:

<script type="text/x-handlebars">
    {{#view App.AView}}{{firstName}} {{surname}}{{/view}}
</script>
你正在寻找?

答案 2 :(得分:0)

这告诉ember使用嵌套的内部AView创建一个外部匿名视图。

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

编辑:您可以更改此类匿名视图的标记名称。见下文。

为了实现所需的行为,我将通过使用命名视图模板来避免外部匿名。我创建了两个使用相同模型的视图。这是一个例子。

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();
});

车把:

<script type="text/x-handlebars" data-template-name="first">
    {{model.firstName}}
</script>
<script type="text/x-handlebars" data-template-name="last">
    {{model.surname}}
</script>
编辑:正如ebryn所指出的那样。可以在匿名视图上更改标记名称。

<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>