In an Ember.js Handlebars template, is there a way to have both static and dynamic class attributes?

后端 未结 4 1958
青春惊慌失措
青春惊慌失措 2021-02-13 19:34

Using the already-overused to-do app example, let\'s say I want an element with a \"todo\" class (static) and an \"is-done\" class (dynamic):



        
相关标签:
4条回答
  • 2021-02-13 20:06

    In Ember master, a change was committed today to allow static classes to be specified within bindAttr by prepending a colon.

    https://github.com/emberjs/ember.js/commit/ce385e3294be019215c555511c7f393aebc02e41

    This may change before the next release, of course, but this is a problem that the Ember core team wants to solve.

    0 讨论(0)
  • 2021-02-13 20:18

    In ember 1.10.0, bindAttr is deprecated. You can directly bound a variable to class of div. here the color variable is bound to the class of a div:

    <div class="{{color}}"></div>
    

    The inline if helper can also be used in these contexts:

    <div class="{{color}} {{if isEnabled 'active' 'disabled'}}"></div>
    

    http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html

    0 讨论(0)
  • 2021-02-13 20:20

    I don't know if you can do it with bindAttr, but the #view helper does allow you to set both static classes and dynamic ones:

    {{#view App.TodoView class="todo" classBinding="isDone"}}
      inner content
    {{/view}} 
    
    0 讨论(0)
  • 2021-02-13 20:31

    EDIT:

    We've fixed this in Ember!

    On a build from master, or after 0.9.6 is released, you can now do:

    <div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>


    Previous answer:

    You unfortunately can't have both static and dynamic class names when using bindAttr.

    I suggest using one or more computed properties on your view to output both static and dynamic class names.

    Supporting both static and dynamic class names would be very nice, but the way bindAttr currently works, it's not possible. bindAttr doesn't know anything about the element it's being attached to during template compilation.

    0 讨论(0)
提交回复
热议问题