javascript - 在 Ember 中如何使用 View 更改 css 属性然后查看它？

Question

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

http://jsfiddle.net/rLtb7dc7/

我有什么...

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>