JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.3.js"></script>
<p>
  What is the best way of grabbing the content for a view which is created from a template?
</p>

<script type="text/x-handlebars" data-template-name="section-item">
    {{content.name}}
</script>

<script type="text/x-handlebars">
    <p>Current section is "{{App.current.section}}"</p>
    <p>Click below to change the section:</p>
    {{#each App.sections}}
      {{view App.SectionView contentBinding="this"}}
    {{/each}}
</script>

CSS

li.is-current {
  background-color: red;   
}

JavaScript

App = Ember.Application.create({});

App.current = Ember.Object.create({section: "two"});

App.SectionView = Ember.View.extend({
    templateName: "section-item",
    tagName: "li",
    classNameBindings: ["isCurrent"],
    isCurrent: false,
    
    init: function() {
      this._super();
      // I want to set isCurrent based on the content, but it doesn't seem to be set yet
      // console.info("content is undefined at this point:", this.get("content"));
    },
    
    contentChanged: function() {
      // seems like overkill to observe something which will only be set once
      // console.info("contents changed:", this.get("content").get("name"));
      this.sectionChanged();
    }.observes("content"),
    
    sectionChanged: function() {
      var section = App.current.get("section");
      var name    = this.get("content").get("name");
      this.set("isCurrent", section == name);
    }.observes("App.current.section"),
    
    click: function() {
      var name = this.get("content").get("name");
      App.current.set("section", name);
    }
});

App.sections = Ember.A();
App.sections.pushObject(Ember.Object.create({name: "one"}));                       App.sections.pushObject(Ember.Object.create({name: "two"}));
App.sections.pushObject(Ember.Object.create({name: "three"}));