2

Twitter Bootstrap アラートをどのようにレンダリングしますか? アプリの場合、アラート コンテナー / フラッシュ メッセージが 1 つしかないとします。

エラーが発生したときに表示されるようにします。今、私は非常に汚いソリューションを使用して、コントローラーにプレゼンスを追加しています。

Sks.KudoController = Ember.ObjectController.extend
  needs: ['currentUser']
  addKudo: (user) ->
    self = this
    token = $('meta[name="csrf-token"]').attr('content')
    ErrorMessageTmplt = """
      <div id="kudos-flash" class="alert" alert-error" style="display: none">
        <a class="close" data-dismiss="alert" href="#">&times;</a>
        <strong>oops! an error occured!</strong>
      </div>
    """
    $flashContainer = jQuery '#flash-container'

    jQuery.post("/kudos", user_id: user.get("id"), authenticity_token: token)
    .done((data, status) ->
      kudosLeft = self.get 'controllers.currentUser.kudosLeft'
      if kudosLeft > 0
        self.decrementProperty "controllers.currentUser.kudosLeft" 
      else 
        $flashContainer.empty()
        jQuery(ErrorMessageTmplt).appendTo($flashContainer).show()
    )
    .fail((data, status) ->
        $flashContainer.empty()
        jQuery(ErrorMessageTmplt).appendTo($flashContainer).show()
    )

アプリケーション テンプレートのどこかにレンダリングする必要があると思いますが、方法がわかりません。多分アラートは部分的であるべきですか？

4

1 に答える 1

2

アラート HTML をアプリケーション テンプレートに追加できます。

<div id="flash" class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <span></span>
</div>

次に、アクションごとに jQuery を呼び出して、次のようにスパンを atextまたは anhtmlで埋めることができます。

App.ProductRemoveRoute = Em.Route.extend({
    setupController: function(controller, model) {
        var c = this.controllerFor('product');
        controller.set('content', c.get('content'));
    },
    events: {
        confirmRemove: function(record) {
            record.deleteRecord();

            // I know this looks no good, and definitely has 
            // room for improvement but gets the flash going
            $("#flash span").text("Product successfully removed.")
            .show().parent().fadeIn()
            .delay(2000).fadeOut('slow', function() { 
                $("#flash span").text('') 
            });

            this.transitionTo('products');
        }
    }
});

その div を隠し要素として追加するか、Ember のビューdidInsertElementを使用して非表示にすることができます。

App.ApplicationView = Em.View.extend({
    didInsertElement: function() {
        this.$('#flash').hide();
    }
});

ここにフィドルがあります：

http://jsfiddle.net/schawaska/aMGFC/ (旧)

http://jsfiddle.net/schawaska/FYvuD/ (新規)

この新しいサンプルの時点で、ダミーの mixin を使用して通知テキストを消去しています。これはプロパティ内にApplicationControllerあり、通知フラッシュは部分ビュー テンプレートです。

これは明らかに唯一の方法ではなく、通知メッセージを点滅させるためにできることの実験/サンプルです。繰り返しますが、これはよりエレガントでモジュール化された方法で実装できると確信しています。それが役に立てば幸い。

于 2013-04-05T04:03:28.357 に答える