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 クラスを表示させることです。

この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 に答える