適用於domready與Ember.js

Question

什麼是正確的方式來運行JavaScript（在我的情況下，jQuery）來修改DOM的一部分（一個Ember視圖）。

在我看來，使用didInsertElement不會在路由上下文更改之間運行。例如。從一個職位到另一個職位。

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

嘗試使用afterRender掛鉤但結果相同。我認爲這是因爲Ember只更新Handlebars變量而不是它自己的視圖，因爲它們來自同一個模型。

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

我相信我得到它的工作的觀察員連接到這樣的didInsertElement：

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); 
     } 
    } 
}); 

的觀察是聽我的模型我的「圖像」屬性，它似乎工作。是否正確的做法？似乎有點過分，或者我錯過了什麼？

作爲一個例子，我的模型模板有一些我需要修改的圖像。

Answer 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; 
}