【问题标题】:Preventing redraw in Mithril防止在秘银中重绘
【发布时间】:2017-10-17 20:57:43
【问题描述】:

我为秘银制作了一个简单的FlashMessage 模型,我用它来显示表单的反馈(例如成功保存):

// the model
var FlashMessage = {
    messages: [],

    clear: function()
    {
        FlashMessage.messages = [];
    },

    add: function(level, message)
    {
        var mess = {level:level, message: message};
        FlashMessage.messages.push(mess);
    },

    get: function()
    {
        var messages = FlashMessage.messages;
        FlashMessage.clear();
        return messages;
    }
};

module.exports = FlashMessage


// the use
m('section.flash-messages', FlashMessage.get().map(function(mess){return m('.message-' + mess.level, mess.message);}))

保存数据时,布局会显示 flash 消息,这很好,但是一旦我在表单上再次将数据输入到 input 中,flash-message div 似乎被重新绘制,因为 get 方法会删除数据,闪信息消失。这是因为据我所知,当数据发生变化时,秘银会重绘,但我该如何防止这种情况发生?

【问题讨论】:

    标签: mithril.js


    【解决方案1】:

    正如我将向您展示的那样,防止重绘很简单,但在您的情况下,这不是一个好的解决方案。相反,您应该改变对状态的看法。

    防止重绘

    只需将函数onbeforeupdate 添加到您的组件中,如果您不想更新,则返回 false。

    var Component = {
        onbeforeupdate: function (vnode, old) {
            var shouldUpdate = ???;
    
            return shouldUpdate;
        }
        ...
    };
    

    考虑状态

    应用程序的状态应始终反映在 UI 中。如果状态发生变化, 显示的内容也应该改变。这是 React 和所有的核心原则 它启发的图书馆,其中包括秘银。这样做可以使它 易于编写有状态应用程序,这就是这些库受欢迎的原因。

    以任何其他方式进行操作都是(非常)不好的做法。 你将很难让它正常工作, 不仅因为 [Mithril] 旨在确保状态更新始终反映在 UI 中, 但也因为它很难推理。 (另外,您的代码对其他人没有意义。)

    你的情况

    如果您希望消息留在屏幕上,它们也应该保持在状态中。

    仅当您希望消息消失(在屏幕上)时,才应将其从状态中删除。

    请发布一个新问题,解释你想要实现的目标,我会告诉你如何做到这一点:)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-07-24
      • 1970-01-01
      • 2011-03-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多