如何在同一行上渲染Ember组件

Question

这个Ember template code ......

<div class="detail bedrooms">
  <span>Number of bedrooms:</span> {{rental.bedrooms}}
</div>
<div class="detail temperature">
  <span>Current Temperature:</span> {{city-temperature location=rental.city}}
</div>

...导致此渲染......

如何让“25C”文本与“当前温度”在同一行上呈现，就像“旧金山”与“位置”在同一行上一样？

我试过让city-temperature组件只返回文本，但是（这里的第二个问题）如果文本来自远程ajax请求，组件甚至可能只返回文本，因为promise似乎需要一个要追加的DOM元素？

此Ember应用程序可用here on GitHub。它是官方Ember.js教程应用程序的修改版本，添加了“当前温度”细节。

Answer 1

问题在于; city-temperature是一个组成部分;默认情况下，ember组件被指定为div作为其标签。由于此; city-temperature的内容从新行开始。

你能做什么？与css一起玩，并确保div的{​​{1}}标记不会以新行开头;而是漂浮在所有者div内。第二个选项是使city-temperature组件无标记;所以它不会从一个新的行开始。为此;你可以宣布：

city-temperature

在tagName: '' 内

。您可以看到以下twiddle以查看我提到的第二个选项。

阅读你的评论后;我已经分叉了您的存储库并进行了一些小修改以实现您的需求。您可以查看我的repository和相应的commit，了解我的更改内容。

基本上;我真的不喜欢city-temperature.js服务返回DOM元素的想法。我已将其更改为返回ember promise的实例（我的意思是weather）。在Ember.RSVP.Promise内，我只需从city-temperature.js服务中设置检索到的天气值，并将其设置为组件，而不是进行DOM修改。最后;我修改了weather以呈现city-temperature.hbs并添加了一个简单的css项目，以防止weatherValue div插入新的换行符。

我不确定;你是否愿意我的解决方案;但我想你会找回你想要的视觉外观。您可以始终依赖承诺执行异步任务;您不需要创建DOM元素并将它们传递给组件，并将它们附加到相应组件的DOM树中的某个位置。我相信我们使用像weather-container这样的框架的原因之一是防止这样的DOM修改。最好的问候。

Answer 2

默认情况下，ember组件会添加div。如果您不想添加此div标记，则需要将tagName设置为空字符串。 那叫做无标记组件。

此外，对于您的情况，您可以提供tagName='span'，这样您的模板中就不需要span。

export default Ember.Component.extend({
  tagName: 'span',
  classNames: ['weather-container'],
  weather: Ember.inject.service(),
  //rest of your code...
});