Question

我在测试一个Ember.Component时遇到了一些麻烦...我很确定我一定会遗漏一些东西，但它似乎没有对模板中的值进行实时绑定？

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

这是破碎的，（但请参阅jsbin for explicits）：

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有机会重新渲染视图之前试图访问视图。这是运行循环工作方式的一部分（有关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

Ember组件的基本测试

1 个答案: