jquery - 使用 Ember.js 正确 Hook domready

Question

运行 JavaScript(在我的例子中是 jQuery)来修改 DOM 的一部分(Ember View )的正确方法是什么。

在我看来，使用 didInsertElement 不会在路由上下文更改之间运行。例如。从一个帖子到另一个帖子。

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

尝试使用 afterRender Hook ，但结果相同。我认为这是因为 Ember 只更新 Handlebars 变量而不是 View 本身，因为它们来自同一模型。

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