Question

我创建了这个视图

{{#view Q.FlashView id="flash-view"}}
<div class="row">
  <div class="small-11 small-centered columns">
    <div id="message" {{bindAttr class=":alert-box :radius"}} data-alert>
      {{view.content.message}}
      <a href="#" class="close">&times;</a>
    </div>
  </div>
</div>
{{/view}}

有了这个定义

Q.FlashMessage = Ember.Object.extend({
  type: "notice",
  message: null,
  isNotice: (function() {
    return this.get("type") === "notice";
  }).property("type").cacheable(),
  isWarning: (function() {
    return this.get("type") === "warning";
  }).property("type").cacheable(),
  isError: (function() {
    return this.get("type") === "error";
  }).property("type").cacheable(),
  isSuccess: (function() {
    return this.get("type") === "success";
  }).property("type").cacheable()
});

Q.FlashView = Ember.View.extend({
  contentBinding: "Q.FlashController.content",
  classNameBindings: ["isNotice: secondary", "isWarning: alert", "isError: alert", "isSuccess: success"],
  isNoticeBinding: "content.isNotice",
  isWarningBinding: "content.isWarning",
  isErrorBinding: "content.isError",
  isSuccessBinding: "content.isSuccess",

我要做的是让视图显示以下css类，具体取决于类型，例如通知例如class =“alert-box radius notice”。

我无法弄清楚这是如何完成的，因为看起来这个classNameBindings没有使用静态内容。

我已经向原作者提出了这个问题，我从中获取了代码coderberry.me/blog/2013/06/20/using-flash-messages-with-emberjs/

你可以在那里看到原始代码。

提前致谢

Answer 1

您可以根据属性添加类

    <div id="message" {{bindAttr class=":alert-box :radius view.isNotice:notice view.isWarning:warning"}} >
     {{view.content.message}}
      <a href="#" class="close">&times;</a>
    </div>

Answer 2

classNamesBindings定义的语法错误是什么？

classNameBindings: ["isNotice: secondary", "isWarning: alert", "isError: alert", "isSuccess: success"],

它应该看起来像这样（冒号后没有空格）：

  classNameBindings: ["isNotice:secondary", "isWarning:alert", "isError:alert", "isSuccess:success"],

并且classNameBindings应该使用计算属性。如果没有，你可以设置观察者来改变静态属性作为一种解决方法。

使用EmberJS添加动态Css

2 个答案: