Question

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

我希望在出现错误时显示。现在我使用非常脏的解决方案，向控制器添加状态。

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的视图didInsertElement来隐藏它：

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

这是一个小提琴：

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

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

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

这显然不是解决问题的唯一方法，而是更多的实验/样本，以便闪现通知消息。同样，我确信这可以以更优雅和模块化的方式实现。希望它有所帮助。

如何渲染引导警报

1 个答案: