ember模板中的动态类

时间:2014-08-07 16:32:42

标签: class templates dynamic ember.js view

我从Angular开始使用Ember.js(我正在尝试和学习不同的框架)。 有人可以解释一下如何在Ember模板中创建动态类吗? 我已经阅读了文档,但我必须说它对我来说仍然有点模糊。

这就是我想要做的事情:

<div class="myClass-{{id}}></div>

{{id}} 等同于json中的item id。 我不知道它是否有帮助,但我也使用Ember View作为该模板。

感谢您的时间和谢谢!

1 个答案:

答案 0 :(得分:0)

我不确定为什么你会想要这样做'可以'通过正常的{{bind-attr}}帮助

<div {{bind-attr class=someProperty}}></div>

如果数据是通过用户操作生成的。然后在动作的接收器中(在控制器中),您可以执行以下操作:

someAction: function(id){
 this.set('someProperty', 'class-' + id);
}

如果它处于加载状态,您可以通过路径中的model挂钩或setUpController挂钩填充该属性

模型钩:

model: function(){
 return {someProperty: 'class-' + id}; //where ever id is coming from
}

setupController hook:

setupController: function(controller, model){
  controller.set('someProperty', 'class-' + id); //where ever id is coming from
}

修改

在您的视图中回调:

didInsertElement: function(){
  var _scope = this;
  var cb = function(){
    _scope.get('controller').set('someProperty', 'class-' + id);
  }
  //set up jquery countdown
}

为了安全起见,如果你在jquery中做一些倒计时触发器,它将不会进入Ember的runloop,所以你可能会看到一些奇怪的行为。考虑使用run详细here