Ember SO Model from View

by mgrassotti

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<script type="text/x-handlebars">
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="remark">
        <small class="muted">id: {{id}} </small>
        {{view App.RemarkTextField valueBinding="title"}}
  </script>

<script type="text/x-handlebars" id="remarks/index">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <table class="table">
            <thead>
              <tr><th>All</th></tr>
            </thead>
            {{#each controllers.remarks}}
              <tr><td>
                        {{#linkTo 'remark' this}}
        {{title}} <small class="muted">id: {{id}} </small>
      {{/linkTo}}
                  </td></tr>
            {{/each}}
          </table>
        </div>
      </div>
    </div>
  </script>

CSS

/* Put your CSS here */
html, body { margin: 20px; }
.active { font-weight: bold; }

JavaScript

App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});

App.RemarkTextField = Ember.TextField.extend({
  focusOut: function(evt) {
    console.log('controller', this.get('controller'));
    var state = this.get("controller.stateManager.currentState.name");
    console.log('state', state);  
  }
});

App.Router.map(function() {
  this.resource('remarks', function() {
    this.resource('remark', { path: ':remark_id' });
  });
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('remarks');
  }
});

App.RemarksRoute = Ember.Route.extend({
  model: function() {
    return App.Remark.find();
  }
});

App.RemarksIndexController = Ember.Controller.extend({
    needs: ['remarks']
});

App.Remark = DS.Model.extend({
  title: DS.attr('string'),
});
App.Remark.FIXTURES = [];

for (num = 1; num <= 10; ++num) {
    title = "Remark " + num;
    App.Remark.FIXTURES.push({id: num, title: title});
}