如何在同一行渲染 Ember 组件

Question

<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”文本与 "Current Temperature" 在同一行呈现，就像 "San Francisco" 与 "Location" 在同一行呈现一样？

我已经尝试将城市温度组件设为 return 纯文本，但是（这里的第二个问题）如果文本来自远程 ajax 请求，因为 promise 似乎需要一个 DOM 元素附加到?

此 Ember 应用可用 here on GitHub。这是官方 Ember.js 教程应用程序的修改版本，添加了此 "Current Temperature" 细节。

Answer 1

问题在于； city-temperature是一个组件；默认情况下 ember 个组件被分配 div 作为它们的标签。由于此; city-temperature 的内容换行开始。

你能做什么？使用 css 并确保 city-temperature 的 div 标签不会从新行开始；而是在所有者 div 中浮动。第二个选项是使 city-temperature 组件无标签；这样它就不会从新行开始。要做到这一点；你可以声明：

tagName: ''

在 city-temperature.js 之内。可以看下面twiddle看我说的第二个选项

阅读您的评论后；我已经分叉了你的存储库并做了一些小的修改来实现你想要的。你可以查看我的 repository and my corresponding commit 看看我改变了什么。

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

我不确定；您是否喜欢我的解决方案；但我猜你会找回你想要的视觉外观。您始终可以依赖异步任务的承诺；您不需要创建 DOM 元素并将它们传递给组件并将它们附加到相应组件的 DOM 树中的某处。我相信我们使用像 Ember 这样的框架的原因之一是为了防止这样的 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...
});

如何在同一行渲染 Ember 组件

How to render Ember component on same line

ember.js