如何在Total.js Flow中动态更改组件颜色

Question

我正在使用Total.js Flow，并且我正在尝试修改现有的代码，以便能够动态地更改组件颜色。例如，使用devices部分中的" light“组件，当灯打开时，我希望组件的颜色更改为，比方说浅蓝色，当灯关闭时，我希望颜色更改为浅红色。这只是为了帮助直观地查看灯光何时打开/关闭。

通过反复试验，我成功地知道灯是开着还是关着的。在那里，使用一个简单的if/else语句，我就能够知道如何更改颜色，但它只有在重新加载整个页面时才起作用。我注意到通过阅读各种SO帖子，有一个热门的重载函数(FLOW.reload())，但它似乎没有像预期的那样工作。当灯光处于开/关状态时，如何动态更改组件的颜色？

var status = () => 
{
        instance.status('Light is: ' + (device.on ? 'On' : 'Off'));
    instance.dashboard('status', device);
    instance.flowboard('status', device);

    // if device is on change label and block color
    if (device.on.toString() == 'true')
    {
        this.state.color = 'blue';   // changes the label color
        instance.color = '#FFFFFF';  // changes color of block              

    }
    else    // if device is off
    {
        this.state.color = 'red';   // changes the label color
        instance.color = '#BB0000'; // changes color of block           
    }
};

Answer 1

您的code是OK的，但是您需要执行instance.reconfig()方法，该方法将通知所有客户端/流设计器更改。我们不建议在短时间内调用instance.reconfig()函数，它的开销太大。