ember-div-as-bound-view

by Benmonro

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.min.js"></script>
<script src="https://raw.github.com/cmoel/tom_dale_ember_screencast/master/js/libs/ember-data.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<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="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
  <script type="text/x-handlebars" id="index">
      <p>Source (HTML)</p>
     {{view Ember.TextArea valueBinding=source}}
      <hr/> 
      <p>Preview:</p>
      <div id="blah">
          {{{source}}}
      </div>
      <button {{action "doUpdate"}}>click me</button>
  </script>

  <script type="text/x-handlebars" id="posts/index">
    <p class="text-warning">Please select a post.</p>
  </script>

  <script type="text/x-handlebars" id="post">
    {{#if isEditing}}
      {{partial 'post/edit'}}
      <button class="btn" {{action 'doneEditing'}}>Done</button>
    {{else}}
      <button class="btn" {{action 'edit'}}>Edit</button>
    {{/if}}

    <h1>{{title}}</h1>
    <h2>by {{author}} <small class="muted">{{date publishedAt}}</small></h2>

    <hr>

    <div class="intro">
      {{markdown intro}}
    </div>
    <div class="below-the-fold">
      {{markdown extended}}
    </div>
  </script>

  <script type="text/x-handlebars" id="post/_edit">
    <p>{{view Ember.TextField valueBinding='title'}}</p>
    <p>{{view Ember.TextArea valueBinding='intro'}}</p>
    <p>{{view Ember.TextArea valueBinding='extended'}}</p>
  </script>

  <script type="text/x-handlebars" id="about">
    <div class="about">
      This is about
    </div>
  </script>

CSS

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

JavaScript

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

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

App.IndexRoute = Ember.Route.extend({
  model: function() {
    App.Data.create();
  }
   
});

App.IndexController = Ember.ObjectController.extend({
     doUpdate:function() {
        //this doesn't work
        $("#blah").html("<div>goodbye</div>");
        $("#blah").change();
       

    }
});

App.Data = Ember.Object.extend({
    source: ""
});