How to Add a Blade to an Aspect

Once you've created a Blade and developed it in isolation in a Workbench you will want to add it to an Aspect.

In the aspect folder (by default your app directory) you'll find an App.js file in the following location:

src/app-name/App.js

In order to add the Blade to the Aspect you need to do the following:

• require the View Model for the Blade
• Create an instance of the required View Model
• require the KnockoutComponent helper class
• Create a KnockoutComponent that binds the View Model instance to the Blade's view (referenced by a unique view ID)
• Create an element representing the Blade by calling getElement on the KnockoutComponent instance
• Append the element to the DOM (Document Object Model)

The following example demonstrates this:

'use strict';

/*** new code ***/
var InputViewModel = require( 'brjstodo/todo/input/InputViewModel' );
var KnockoutComponent = require( 'br/knockout/KnockoutComponent' );
/*** end of new code ***/

var App = function() {
  /*** new code ***/
  var inputViewModel = new InputViewModel();
  var inputComponent =
    new KnockoutComponent( 'brjstodo.todo.input.view-template', inputViewModel );
  var inputEl = inputComponent.getElement();

  document.body.appendChild( inputEl );
  /*** end of new code ***/
};

module.exports = App;