CODEWITHSUNDEEP
ember.js
Chroaster
Chroaster

Reputation: 127

How to render Ember component on same line

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

...results in this rendering... screenshot of component text on wrong line

How could one get the "25C" text to render on the same line as "Current Temperature" in the same way that "San Francisco" is on the same line as "Location"?

I have tried getting the city-temperature component to return only text, but (secondary question here) is it even possible for a component to return only text if the text is from a remote ajax request since the promise seems to need a DOM element to append to?

This Ember app is available here on GitHub. It's a modified version of the official Ember.js tutorial app with this "Current Temperature" detail added.

Upvotes: 1

Views: 1106

Answers (2)

feanor07
feanor07

Reputation: 3368

The problem is that; city-temperature is a component; and by default ember components is assigned div as their tags. Due to this; the content of city-temperature starts at a new line.

What can you do? Play with css and make sure div tag of city-temperature does not start at a new line; but instead floating right within the owner div. The second option is making city-temperature component tagless; so that it does not start at a new line. To achieve that; you can just declare:

tagName: ''

within city-temperature.js. You can see the following twiddle to see the second option I mentioned.

After reading your comments; I have forked your repository and made minor modifications to achieve what you want. You can check my repository and my corresponding commit to see what I changed.

Basically; I really did not like the idea that weather service is returning a DOM element. I have changed it to return an instance of ember promise (I mean Ember.RSVP.Promise). Within city-temperature.js I just set a retrieved weather value from weather service and set it to the component instead of making DOM modification. Finally; I modified city-temperature.hbs to render weatherValue and added a simple css item in order to prevent weather-container div to insert a new line break.

I am not sure; whether you will like my solution or not; but I guess you will retrieve the visual appearance you want. You can always rely on promises for async tasks; you do not need to create DOM elements and pass them around to components and append them to somewhere within DOM tree of the corresponding component. I believe one of the reasons we are making use of a framework like Ember is to prevent such DOM modifications. Best regards.

Upvotes: 6

ykaragol
ykaragol

Reputation: 6221

An ember component adds a div by default. If you don't want to add this div tag, you need to set tagName to an empty string. That's called tagless component.

Further, for your case, you can give a tagName='span' so you will not need a span in your template. 

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

Upvotes: 2

Related Questions