Confirmed users
502
edits
Gaia/Settings/docs: Difference between revisions
Jump to navigation
Jump to search
→Common Patterns
| Line 60: | Line 60: | ||
This pattern is especially helpful when encountering subtle UX requirements changes because we can change the view easily without modifying the model. Writing unit tests becomes simple when models do not touch the UI elements and it is no longer required to mock the UI elements. | This pattern is especially helpful when encountering subtle UX requirements changes because we can change the view easily without modifying the model. Writing unit tests becomes simple when models do not touch the UI elements and it is no longer required to mock the UI elements. | ||
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], [https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/mvvm/observable_array.js ObservableArray], and [https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/base/event_emitter.js EventEmitter]. | 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 '''js/panels/display/wallpaper | Let's use '''"[https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/panels/display/wallpaper.js js/panels/display/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. | ||