Confirmed users
502
edits
Gaia/Settings/docs: Difference between revisions
Jump to navigation
Jump to search
→Common Patterns
| Line 62: | Line 62: | ||
The key is to make a model actively report the status in terms of events and property changes. The following modules can be useful when designing models: '''"[https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/mvvm/observable.js Observable]"'''(js/modules/mvvm/observable.js), '''"[https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/mvvm/observable_array.js ObservableArray]"'''(js/modules/mvvm/observable_array.js), and '''"[https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/base/event_emitter.js EventEmitter]"'''(js/modules/mvvm/event_emitter.js). | The key is to make a model actively report the status in terms of events and property changes. The following modules can be useful when designing models: '''"[https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/mvvm/observable.js Observable]"'''(js/modules/mvvm/observable.js), '''"[https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/mvvm/observable_array.js ObservableArray]"'''(js/modules/mvvm/observable_array.js), and '''"[https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/base/event_emitter.js EventEmitter]"'''(js/modules/mvvm/event_emitter.js). | ||
Let's use '''"[https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/panels/display/wallpaper.js | Let's use '''"[https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/panels/display/wallpaper.js Wallpaper]"'''(js/panels/display/wallpaper.js) as an example of models. The idea was to hide the complexity of selecting wallpapers and expose the API that is easy to use in the view module. | ||
The method '''selectWallpaper''' is used to trigger wallpaper selection while '''wallpaperSrc''' is an observable property representing the path to the current wallpaper. We can make any kind of UI trigger a call to '''selectWallpaper'''. When the selection completes, '''wallpaperSrc''' gets updated to the latest value. The view can then make use of '''wallpaperSrc''' to fulfill various requirements such as displaying the path or showing the entire wallpaper. | The method '''selectWallpaper''' is used to trigger wallpaper selection while '''wallpaperSrc''' is an observable property representing the path to the current wallpaper. We can make any kind of UI trigger a call to '''selectWallpaper'''. When the selection completes, '''wallpaperSrc''' gets updated to the latest value. The view can then make use of '''wallpaperSrc''' to fulfill various requirements such as displaying the path or showing the entire wallpaper. | ||