Docs

Everything You Need to Know

Components

Use

Setup

Components are just reusable views. As such, their setup is almost identical to views. The only difference is that for a component, you never, ever provide an element. All components are elementless at creation. The element for a component gets assigned after you create an instance.

// Define a component:
$.Component({
  name: 'PeopleComponent',
  variable: 'person',
  template: 
  "<li class='comp'>\
    <img data-src='{= person.image }' alt='{= $.view.index }: {= person.firstName } {= person.lastName }'>\
    <div>\
      <h3>\
        {= person.firstName } {= person.lastName }\
      </h3>\
    </div>\
  </li>",
  events: [
    {
      event: 'tap',
      element: 'li',
      callback: function() {
        console.log($(this).text());
      }
    }
  ]
});

The above gives a component named "MyWidget" that we can use to create exact copies of the original component. The component will be registered on the dollar sign ($):

// Create an instance of $.MyWidget:
var Widget1 = $.Widget();

After creating an instance of our component, we need to tell it what element it is associated with:

// Create an instance of $.MyWidget:
var Widget1 = $.Widget();

// Tell the component what element to use:
Widget1.setElement('#myWidget1);

Now that the component has an element, we can render it will data:

// Create an instance of $.MyWidget:
var Widget1 = $.Widget();

// Tell the component what element to use:
Widget1.setElement('#myWidget1');

// Render the component with data:
Widget1.render(widgetData);

Below is a complete example of defining and use a component:

// Array data:
//=============
var lums = [
  {firstName: "Stephen", lastName: "Hawking", image: 'images/Hawking.jpg'},
  {firstName: "Albert", lastName: "Einstein", image: 'images/Einstein.jpg'},
  {firstName: "Leonardo", lastName: "Da Vinci", image: 'images/DaVinci.jpg'},
  {firstName: "Galileo", lastName: "Galilei", image: 'images/Galileo.jpg'},
  {firstName: "Nicholas", lastName: "Copernicus", image: 'images/Copernicus.jpg'}  
];

var bums = [
  {firstName: 'Joe', lastName: 'Bodoni', image: 'images/apple.png'},
  {firstName: 'Wobba', lastName: 'Bango', image: 'images/orange.png'},
  {firstName: 'Jeff', lastName: 'Ruther', image: 'images/banana.png'},
  {firstName: 'Pete', lastName: 'Smith', image: 'images/avocado.png'}
];

// Define component "people":
$.Component({
  name: 'People',
  variable: 'person',
  // Get if a start number:
  startIndexFrom: 7,
  template: 
  "<li class='comp'>\
    <img data-src='{= person.image }' alt=''>\
    <div>\
      <h3>\
        {= $.view.index }: {= person.firstName } {= person.lastName }\
      </h3>\
    </div>\
  </li>",
  events: [
    {
      event: 'tap',
      element: 'li',
      callback: function() {
        console.log($(this).text())
      }
    }
  ]
});

// Define a component instance:
var LumsView = $.People();
LumsView.setElement('#arrayTemplate1');
LumsView.render(lums);

// Define another component instance:
var BumsView = $.People();
BumsView.setElement('#arrayTemplate2');
BumsView.render(bums);

// Markup for components:
<ul class="list" id="arrayTemplate1"></ul>
<ul class="list" id="arrayTemplate2"></ul>

See the live example: Components.