Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removed old Component references from the Getting Started guide. #108

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Removed old Component references from the Getting Started guide. #108

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1304df6
Removed old Component references from the Getting Started guide.
ioanalianabalas May 13, 2015
73a5044
Added an info box explaining why we use 'SimpleFrame' objects.
dchambers Jun 3, 2015
7a7e247
Removed the 'null, null' arguments from the SimpleFrame constructor s…
dchambers Jun 3, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions docs/use/getting_started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
<div class="alert alert-info">
<p>
To make blade components re-usable in different apps, we have each blade implement the <code>Component</code>
interface, and house each blade component within a <code>Frame</code>. You don't have to do the same thing, but
that's how we do it.
</p>
</div>

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';
Expand All @@ -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();
Expand All @@ -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 ***/
};

Expand Down