Question

例如，我处理成功完成Symfony实体更新时出现的通知。

我现在所做的就是这里（+ jsFiddle：https://jsfiddle.net/atierant/6e0s4rk1/15/）：

var messagesTypes = {
  "notice": ["This is a green NOTICE"],
  "error": ["This is a red ERROR"],
  "warning": ["This is a yellow WARNING"],
  "info": ["This is a blue INFO"]
};

var colorType = {
  "info": {
    "class": "mdl-color--blue-400",
    "icon": "done"
  },
  "error": {
    "class": "mdl-color--red-400",
    "icon": "error"
  },
  "warning": {
    "class": "mdl-color--amber-400",
    "icon": "warning"
  },
  "notice": {
    "class": "mdl-color--green-400",
    "icon": "done"
  }
};

(function() {
  'use strict';
  var snackbarContainer = document.querySelector('#snackbar');
  var timeout = 2000;
  var actionText = 'Ok';
  var handler = function(event) {};

  // elements.forEach(element => { }) correcpond à for(var element in elements)
  // infoType est un objet qui correspond à un parcours de boucle
  Object.keys(messagesTypes).forEach(infoType => {

    // Définition de l'objet à donner à manger à la SnackBar
    var objTest = {};
    objTest = {
      class: colorType[infoType].class,
      icon: colorType[infoType].icon,
      message: messagesTypes[infoType].toString(),
      type: infoType,
      timeout: timeout,
      actionHandler: function(event) {},
      actionText: actionText
    };

    // Retrait d'une éventuelle classe existante dans la liste
    // Pour chacune des classList, si elle matche le pattern je la vire
    var re = new RegExp(/(^|\s)mdl-color--\S+/, "gi");
    for (var i = 0, len = snackbarContainer.classList.length; i < len; i++) {
      // ma classe en cours
      var currentClass = snackbarContainer.classList[i];
      // Je réalise mon test
      var result = re.test(currentClass);
      // Trace pour voir si je matche ma regex
      console.log('Je traite : ', currentClass, ' resultat ', result);
      if (result === true) {
        snackbarContainer.classList.remove(currentClass);
      }
    };

    snackbarContainer.classList.add(objTest.class);
    snackbarContainer.MaterialSnackbar.showSnackbar(objTest);
    /*setTimeout(function() {
      snackbarContainer.MaterialSnackbar.showSnackbar(objTest);
    }, 5000);*/
  });
})();


function r(f) {
  /in/.test(document.readyState) ? setTimeout('r(' + f + ')', 9) : f();
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.1/material.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.1/material.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="snackbar" class="mdl-js-snackbar mdl-snackbar">
  <div class="mdl-snackbar__text"></div>
  <button class="mdl-snackbar__action" type="button"></button>
</div>

根据服务器发送的警报类型（错误，警告，通知，信息），我尝试更改出现的Material Design Lite快餐栏的类，以更改其颜色。

我删除mdl-color--{color}-*类（如果存在），并根据正确的类型应用新的mdl-color类。

messageTypes是Symfony返回的消息（在FlashBag系统中）。

colorType是匹配的类。

对于这些消息中的每一条，我都会用类和消息更新现有的小吃店。

然后我给小吃店打电话，如下所示：https://getmdl.io/components/#snackbar-section

目前，我有时间问题。它首先对类进行了所有更改，然后用随机消息和最后一个颜色类显示小吃条的奇怪方式。

removeClass
addClass
removeClass
addClass
removeClass
addClass
removeClass
addClass
然后
显示带有消息的快餐栏1 显示带有消息2的快餐栏显示带有消息的快餐栏3 显示带有消息4的快餐栏

如何按此顺序设置：

removeClass
addClass
显示带有消息的快餐栏1 removeClass
addClass
显示带有消息2的快餐栏 removeClass
addClass
显示带有消息的快餐栏3 removeClass
addClass
显示带有消息4的快餐栏

Answer 1

snackbar组件有一个内部队列系统来处理连续显示多条消息。你的代码在逻辑上做了什么反映了你看到的时间结果。您的代码正在删除/添加类，然后将消息推送到队列中。但是，在这些消息完成显示之前，它将转到下一条消息。将消息抛入内部队列，然后在代码中处理下一个消息。这会再次修改类等等。

这里要做的最好的事情是编写自己的对象来处理队列并抽象掉这个着色逻辑。这样你就可以调用NotifierObj.show('message', 'error')，并且它会自己执行队列系统，并且在消息之间将正确的类应用于快餐栏以获取给定的消息指示器级别。

在多材料设计精简小吃店错误的时间

1 个答案: