在Ember中如何用一个视图改变一个css属性然后再查看呢？

Question

我在我的数据库中保存了一种颜色作为文本（例如：“#FFFFFF”），我想像这样显示它 fiddle:

我有什么...

HTML:

<span class="colorpreview"> {{view App.ColorView contentBinding="primaryColor"}} random text</span>

查看：

App.ColorView = Ember.View.extend({
    tagName: "span",
    classNameBindings: 'colorpreview',

    'colorpreview': function() {
        var colorFromDb = this.content;
        $('.colorpreview').css('background-color',colorFromDb);
    }.property('content')
});

CSS:

.colorpreview{
    width: 10px ;
    height: 10px ;
    border-radius: 10px ;
    background-color: #FFF ;
}

如果您需要更多代码或信息，我会在评论中回答，提前致谢 ;)

Answer 1

我可以通过使用助手来做到这一点：

Ember.Handlebars.registerBoundHelper("getStyle", function(o){
    return "background-color:" + o + ";" + "border-radius: 10px; padding: 5px; display: inline-block; vertical-align: middle; border:1px solid black"; 
});

o 在这种情况下是我想显示的主要颜色。

然后在HTML中调用它：

<span style="{{unbound getStyle primaryColor}}" >  </span>

在Ember中如何用一个视图改变一个css属性然后再查看呢？

In Ember how to use a view to change a css property and then view it?

html

javascript

css

jquery

ember.js