mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-11 10:40:29 +00:00
6af3eb539b
* Initial widget tutorials extracted from https://btheado.github.io/tw-widget-tutorial/ * Fixes for refresh behavior change
34 lines
1.3 KiB
Plaintext
34 lines
1.3 KiB
Plaintext
created: 20190205023543910
|
|
modified: 20190217012121130
|
|
tags:
|
|
title: Widget attributes tutorial part II
|
|
type: text/vnd.tiddlywiki
|
|
|
|
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.
|
|
|
|
```javascript
|
|
/*
|
|
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]]):
|
|
|
|
{{Widget attributes demo II}}
|
|
|
|
The visible behavior here should be identical to the unoptimized behavior of the previous tutorial.
|