javascript - Ember 组件的基础测试

Question

我在测试 Ember.Component 时遇到了一些问题...我很确定我一定遗漏了一些东西，但它似乎并没有实时绑定(bind)模板中的值？

也许有人可以解释为什么这个 jsbin pastie 的第一个测试通过了，但第二个测试失败了？

http://jsbin.com/UNivugu/22/edit

这是损坏的，(但请参阅 jsbin 以获得显式信息):

test('Outputs a different attribute value on the component, when set and present in the template', function() {
  Ember.run(function() {
    component.set('someAttr', 'a non-default value');
    var result = component.$().text().trim();
    equal(result, "a non-default value", "it should render the default value");
  });
});

这是组件:

var SomeComponent = Ember.Component.extend({
  template: Ember.Handlebars.compile('{{someAttr}}'),
  someAttr: 'default value'
});

非常感谢!

Answer 1

实际上，问题在于您在 Ember 有机会重新渲染 View 之前尝试访问该 View 。这就是 run loop 工作原理的全部内容(有关 Alex Matchneer 的有趣示例，请看这里:https://machty.s3.amazonaws.com/ember-run-loop-visual/index.html)。本质上，Ember 将等到所有更改结束时才在页面中实际呈现(这是因为呈现是最昂贵的过程)。所以发生的事情是您正在设置值，Ember 有一个新任务来更新所有正在观看该属性的人，并且在每个人都更新之后，Ember 最终将在页面上重新呈现该属性。如果您碰巧连续多次更改属性，这将非常有用，Ember 认为它只会根据最后一个属性进行更新。

综上所述，您可以在页面呈现后安排一个任务，然后查看属性是否已更新。

test('Outputs a different attribute value on the component, when set and present in the template', function() {
  Ember.run(function() {
    component.set('someAttr', 'a non-default value');
    stop();
    Em.run.schedule('afterRender',function(){
      start();
      var result = component.$().text().trim();
      equal(result, "a non-default value", "it should render the default value");
    });
  });
});

http://jsbin.com/UNivugu/27/edit