This example will build on the previous one. The only modification will be to add a check to the refresh method. The refreshSelf will only be called if a change to the attributes is detected.

The computeAttributes method returns a Javascript object containing properties for each attribute which has changed. So a check like if (changedAttributes.attr1 || changedAttributes.attr2 || changedAttributes.attr3) etc. can be used to detect the change. See the refresh method in $:/core/modules/widgets/view.js for an example showing the check for multiple attributes.

For this example, message is the only attribute implemented.

/*
Refresh if the attribute value changed since render
*/
MyWidget.prototype.refresh = function(changedTiddlers) {
	// Find which attributes have changed
	var changedAttributes = this.computeAttributes();
	if (changedAttributes.message) {
		this.refreshSelf();
		return true;
	} else {
		return false;
	}
};

The full code can be seen at hello-attribute-optimized.js and here is the result (Widget attributes demo II):

The visible behavior here should be identical to the unoptimized behavior of the previous tutorial.