CSS inside Ember.js

Question

0 release!

I am having a weird problem rendering CSS under Ember.js. It is weird because the just works fine after manually refreshing the page, and in plain HTML without Ember. I have tried different browsers and different CSS libraries and all the same.

I just want to render tabs inside a handlebars template, I have tried both Zurb Foundation sections and jQuery-ui tabs and both work only after manual page refresh.

I have tried to reproduce the problem with JSBin but it didn't work. I am using the example code from both libraries to do this.

Here is my HTML with Zurb Foundation 4.3: (referencing js and css libraries omitted for brevity)

<html>
<body>
<script type="text/x-handlebars">
  <nav class="top-bar" data-options="is_hover=false">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Main</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section">
      <ul class="left show-on-small">
        <li>{{#linkTo 'families'}}Families{{/linkTo}}</li>
      </ul>
      <ul class="left">
        <li>{{#linkTo 'charities'}}Charities{{/linkTo}}</li>
      </ul>
    </section>
  </nav>

  <div>
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="families">
  <div class="row display">
    <div class="large-3 columns">
      <span>{{#linkTo 'families.details'}}list{{/linkTo}}</span>
    </div>  
    <div class="large-9 columns">
      {{outlet}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="families/details">
  <div class="row">
    <span>details</span>
  </div>
  <div class="row"> 
    <section class="section-container auto" data-section data-section-small-style>
      <section class="active" >
        <p class="title" data-section-title><a href="#panel1">Family Info</a></p>
        <div class="content" id="panel1" data-section-content>
          <span>Family Info goes here</span>
        </div>
      </section>
      <section>
        <p class="title" data-section-title><a href="#panel2">Members</a></p>
        <div class="content" data-slug="panel2" data-section-content>
          <span>Family members list goes here</span>
        </div>
      </section>
    </section>
  </div>
</script>

</body>
</html>

My Javascript:

App = Em.Application.create();

App.Router.map(function() {
    this.resource('families', function() {
        this.route('details');
    });
    this.resource('charities');
});

Just wanted to know if there are any known issues or caveats between Ember/handlebars and CSS.

Thank you.

EDIT: Got a sample running at http://jsbin.com/iTOsof/3 but does not work after refresh like local host

kroofy kroofy · Accepted Answer · 2013-09-07T08:48:08

I am guessing the reason it's not working is because Foundations JavaScript handler is being run when the DOM fires its ready event, at that point Ember haven't rendered its templates so there's nothing to tie the tabs to.

What you could try to do is to add $(document).foundation(); to the DetailsViews didInsertElement.

App.DetailsView = Ember.View.extend({
  didInsertElement: function() {
    $(document).foundation('section'); // this will only load the section component
  }
});

One issue though, since Foundation's JavaScript components are not compatible with Ember you will most likely run into problems when Foundation appends their location hash for the selected section since Ember is using the same method to handle its routing.

You can change Embers location method to a modern variant by specifying:

App.Router.reopen({
  location: 'history'
});

This will however not be compatible with IE 9 and below.

Another alternative is to use Bootstrap as an alternative to Foundation (personally I prefer Foundation over Bootstrap but in this case it may be worth it if you don't want to create your own components in Ember), and then use the Ember Components made available for Bootstrap, http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs-panes

CSS inside Ember.js

1 Answers