Question

我想在EmberJS模板上有随机类名。

它应该看起来像HTML

<div classname='rotate-top'>
</div>
<div classname='rotate-bottom'>
</div>
<div classname='rotate-left'>
</div>

我尝试在emberjs中做，它看起来像

{{#each item in model }}
<div classname='rotate-{{direction}}'>
</div>
{{/each}}

方向将是一个控制器属性，将生成随机方向。但是，它不起作用。每个项目都会生成相同的方向。它不是随机的。我怎样才能实现这一伎俩？

App.IndexRoute = Em.Controller.extend
   direction: ->
     (random function generate either top, left, right, bottom)

Answer 1

我会将“随机”逻辑封装在一个组件中。

例如，您可以创建一个组件，该组件输出一个具有随机类的元素，如

App.RandomDirectionComponent = Ember.Component.extend({
  classNameBindings: ['direction'],
  direction: function(){
    var directions = ['top', 'bottom', 'left', 'right'];
    return 'rotate-' + directions[Math.floor((Math.random() * 4))];
}.property()
});

然后您就可以使用

这样的组件了

{{#each item in model}}
  {{#random-direction tagName="li"}}
    {{item}}
  {{/random-direction}}
{{/each}}

您可以在此处查看一个有效的示例：http://emberjs.jsbin.com/qiqufu/1/edit?html,css,js,output

EmberJS：我们可以为每个模板制作一个随机的classnameBinding吗？

1 个答案: