1

我创建了这个视图

{{#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/提出了这个问题

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

提前致谢

4

2 回答 2

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>
于 2013-07-26T08:48:03.850 回答
0

你在classNamesBindings定义上没有语法错误吗？

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

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

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

并且classNameBindings应该与计算属性一起使用。如果没有，您可以设置观察者将静态属性更改为绕行。

于 2013-07-26T07:24:52.903 回答