Geek asks and answers

The right hook for domready with Ember.js

What is the correct way to run JavaScript (in my case, jQuery) to change the DOM part (Ember view).

Use didInsertElementin my view does not start between route context changes. For instance. from one message to another.

App.PageView = Ember.View.extend({
    didInsertElement: function() {
        console.log(this.$().find('img').length);
    }
});

Tried to use a hook afterRender, but the same result. I suppose this is because Ember only updates the Handlebars variables, not the look itself, since they are from the same model.

App.PageView = Ember.View.extend({
    didInsertElement: function() {
        Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    },
    afterRenderEvent: function() {
        console.log(this.$().find('img').length);
    }
});

I believe this works for me, binding the observer to didInsertElement as follows:

App.PageView = Ember.View.extend({
    didInsertElement: function() {
        Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    }.observes('controller.images'),
    afterRenderEvent: function() {
        if (this.$()) {
            console.log(this.$().find('img').length);
        }
    }
});

Observations listen to my “images” property on my model, which seems to work. Is this the right thing to do? Seems a little successful or what am I missing?

, .

+3
1

, /, , , View. afterRender, DOM .

, http://emberjs.jsbin.com/xixit/1/edit

JS

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.IndexController = Ember.Controller.extend({
  images:[
    "http://lorempixel.com/50/50/technics/10/",
    "http://lorempixel.com/50/50/technics/12/",
    "http://lorempixel.com/50/50/technics/15/",
    "http://lorempixel.com/50/50/technics/17/"
         ],
  actions:{
    addImage:function(){
 this.get("images").pushObject("http://lorempixel.com/50/50/technics/"+parseInt(Math.random()*10,10)+"/");
    }
  }
});

App.IndexView = Ember.View.extend({
  showImages:false,
  styleImages:function(){
    /*use this, or something simple like the function runCode at the end (examples, http://jsfiddle.net/melc/sy6Ax/)*/
    /*or also observe the length, if new images added*/
    Ember.run.next(function(){
      this.$('img').addClass("img-borders");
    });
  }.observes("showImages","controller.images.@each"),
  actions:{
    toggleImages:function(){
      this.toggleProperty("showImages");
    }
  }
});



function runCode(selector,theMethod,timeInMillis){
    if($(selector).length>0){
        theMethod();
    }else{
        setTimeout(function(){runCode(selector,theMethod,timeInMillis);},timeInMillis);
    }
}

HBS

<script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
    <button {{action toggleImages target="view"}}>images</button>
<br/><br/>
    {{#if view.showImages}}
    {{#each img in images}}
    <img {{bind-attr src=img}}/>
    {{/each}}
    <br/>
    <button class="btn-add-img" {{action addImage}}> add image</button>
    {{/if}}

  </script>

CSS

img{
  float:left;
  margin-right:5px;
}

img.img-borders{
  border:1px solid grey;
  box-shadow: 0 0 2px 0 blue;
}

.btn-add-img{
  float:left;
  clear:both;
  margin-top:5px;
}
+2

More articles:


All Articles