ember.js - 如何呈现引导警报

Question

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

我希望它在出现错误时出现。现在我使用一个非常脏的解决方案，向 Controller 添加存在。

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()
    )

我认为它应该呈现在应用程序模板中的某个位置，但我不知道如何呈现。也许警报应该是部分的？

Answer 1

您可以将警报 html 添加到您的应用程序模板中:

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

然后对于每个操作，您可以调用 jQuery 并用 text 填充范围。或 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 的 View didInsertElement隐藏它:

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

这是一个 fiddle :

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

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

在这个新示例中，我使用虚拟 mixin 来删除通知文本，该文本现在位于 ApplicationController 的属性中，并且通知 flash 是部分 View 模板。

这显然不是唯一的方法，它更多的是一个实验/示例，说明人们可以做什么来闪烁通知消息。再次，我确信这可以以更优雅和模块化的方式实现。希望对您有所帮助。