From 1304df685f443139412bcd94791ada59c1aa3884 Mon Sep 17 00:00:00 2001 From: Ioana Balas Date: Wed, 13 May 2015 16:44:11 +0100 Subject: [PATCH 1/3] Removed old Component references from the Getting Started guide. --- docs/use/getting_started.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/use/getting_started.md b/docs/use/getting_started.md index b411831..66c14d3 100644 --- a/docs/use/getting_started.md +++ b/docs/use/getting_started.md @@ -768,7 +768,7 @@ module.exports = App; At this point we haven't added any content to our page and it will just 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: +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 +777,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 +790,14 @@ var App = function() { /*** new code ***/ var todoAppEl = document.getElementById( 'todoapp' ); - todoAppEl.appendChild( inputComponent.getElement() ); - todoAppEl.appendChild( itemsComponent.getElement() ); + var inputFrame = new SimpleFrame(inputComponent, null, null); + todoAppEl.appendChild( inputFrame.getElement() ); + inputFrame.trigger('attach'); + + var itemsFrame = new SimpleFrame(itemsComponent, null, null); + todoAppEl.appendChild( itemsFrame.getElement() ); + itemsFrame.trigger('attach'); + /*** end of new code ***/ }; From 73a5044d9642a5a1f7142752f472ee786fb82a34 Mon Sep 17 00:00:00 2001 From: dchambers Date: Wed, 3 Jun 2015 08:46:02 +0100 Subject: [PATCH 2/3] Added an info box explaining why we use 'SimpleFrame' objects. --- docs/use/getting_started.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/use/getting_started.md b/docs/use/getting_started.md index 66c14d3..1d77867 100644 --- a/docs/use/getting_started.md +++ b/docs/use/getting_started.md @@ -766,7 +766,15 @@ 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. + +
+

+ 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: From 7a7e2471cdfe3d873d4624b936041647551e84ef Mon Sep 17 00:00:00 2001 From: dchambers Date: Wed, 3 Jun 2015 08:47:57 +0100 Subject: [PATCH 3/3] Removed the 'null, null' arguments from the SimpleFrame constructor since, although these are useful to have in our templates as they indicate the presence of unused parameters, within the documentation they just make things seem more complicated than they actually are. --- docs/use/getting_started.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/use/getting_started.md b/docs/use/getting_started.md index 1d77867..9f93ae9 100644 --- a/docs/use/getting_started.md +++ b/docs/use/getting_started.md @@ -798,11 +798,11 @@ var App = function() { /*** new code ***/ var todoAppEl = document.getElementById( 'todoapp' ); - var inputFrame = new SimpleFrame(inputComponent, null, null); + var inputFrame = new SimpleFrame(inputComponent); todoAppEl.appendChild( inputFrame.getElement() ); inputFrame.trigger('attach'); - var itemsFrame = new SimpleFrame(itemsComponent, null, null); + var itemsFrame = new SimpleFrame(itemsComponent); todoAppEl.appendChild( itemsFrame.getElement() ); itemsFrame.trigger('attach');