2

你将如何呈现 Twitter Bootstrap 警报？假设对于一个应用程序只有一个警报容器/闪存消息。

我希望它在出现错误时出现。现在我使用了一个非常肮脏的解决方案，为控制器添加了存在感。

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>

text然后对于每个动作，您可以调用 jQuery 并用 a或 an填充 span html，如下所示：

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 的 ViewdidInsertElement将其隐藏：

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

这是一个小提琴：

http://jsfiddle.net/schawaska/aMGFC/（旧）

http://jsfiddle.net/schawaska/FYvuD/（新）

在这个新示例中，我正在使用一个虚拟 mixin 来擦除通知文本，该文本现在位于一个属性中ApplicationController，并且通知 flash 是一个局部视图模板。

这显然不是唯一的方法，它更多的是一个实验/样本，可以做些什么来闪烁通知消息。同样，我确信这可以以更优雅和模块化的方式实现。希望能帮助到你。

于 2013-04-05T04:03:28.357 回答