diff --git a/docs/use/getting_started.md b/docs/use/getting_started.md index b411831..9f93ae9 100644 --- a/docs/use/getting_started.md +++ b/docs/use/getting_started.md @@ -766,9 +766,17 @@ var App = function() { module.exports = App; ``` -At this point we haven't added any content to our page and it will just a blank page. +At this point we haven't added any content to our page and it will just be a blank page. -In order for the Blade components to appear in the aspect we have to append the DOM elements that the `KnockoutComponent` instances create, to the Aspect (the main view into the Todo List web app). We do this by calling `component.getElement()` and appending the returned element append it to the `todoapp` element in the DOM: +
+

+ To make blade components re-usable in different apps, we have each blade implement the Component + interface, and house each blade component within a Frame. You don't have to do the same thing, but + that's how we do it. +

+
+ +In order for the Blade components to appear in the aspect we have to append the DOM elements that the `KnockoutComponent` instances create, to the Aspect (the main view into the Todo List web app). We do this by creating a `SimpleFrame` object for the component, then calling `frame.getElement()` on it and appending the returned element to the `todoapp` element in the DOM: ```js 'use strict'; @@ -777,6 +785,7 @@ var InputViewModel = require( 'brjstodo/todo/input/InputViewModel' ); var ItemsViewModel = require( 'brjstodo/todo/items/ItemsViewModel' ); var KnockoutComponent = require( 'br/knockout/KnockoutComponent' ); +var SimpleFrame = require('br/component/SimpleFrame'); var App = function() { var inputViewModel = new InputViewModel(); @@ -789,8 +798,14 @@ var App = function() { /*** new code ***/ var todoAppEl = document.getElementById( 'todoapp' ); - todoAppEl.appendChild( inputComponent.getElement() ); - todoAppEl.appendChild( itemsComponent.getElement() ); + var inputFrame = new SimpleFrame(inputComponent); + todoAppEl.appendChild( inputFrame.getElement() ); + inputFrame.trigger('attach'); + + var itemsFrame = new SimpleFrame(itemsComponent); + todoAppEl.appendChild( itemsFrame.getElement() ); + itemsFrame.trigger('attach'); + /*** end of new code ***/ };