"KeyboardContext"(js/modules/keyboard_context.js) is the core of the keyboard settings panels. It provides methods for retrieving installed keyboards and the currently enabled layouts. The information is provided using observable arrays. Whenever there is a new keyboard installed/uninstalled or a layout is enabled/disabled, "KeyboardHelper"(shared/keyboard_helper.js) notifies KeyboardContext and then it updates the corresponding arrays. On the other hand, KeyboardContext also observes the change of each layout item, so it can respond to the users requests for enabling layouts. The UI reflects to the array changes automatically because we are using "ListView"(js/modules/mvvm/list_view.js) to render them.
The tricky part of rendering keyboards is that the data structure of them is nested. Not only the keyboards need to be rendered but also the layouts contained in each keyboard. We used "NestedTemplateFactory"(panels/keyboard_add_layouts/nested_template_factory.js) to make the template function for the child items available to the one for the parent items.