What is the difference between a ractive template,

I've built a ractive.js app using partials. These partials are loaded via fetch/ajax - and all works nicely.

I then decided I wanted to encapsulate data along with the partial so looked at components - as I understood a component to do just that: Isolate a template/partial with its data.

I then looked to load the components in: http://ractivejs.github.io/ractive-load/

However, I don't really see the advantage of this approach - as it appears with the loader you can only load in the components template, not the entire encapsulated component (data, templates etc). You still have to put the data onto the main ractive instance (as you would with a partial).

I'm trying to dyanamically update the component. I'm also using page.js for routing. I'm trying to separate out all the concerns.

I'm probably not explaining myself very well - here is my code... most of it was taken from martydpx's answer here How to create Ractive's subcomponents dynamically and change them programmatically )

....
<dynamic name='{{name}}'/>
</script>


<script>
// Component loader
Ractive.load({
 home:      '/components/home.html', // seems this can only contain a template. Is it possible for it to contain everything - data and all?
 packs:     '/components/packs.html',
 ....
 addplayer: '/components/addplayer.html',
 notfound:  '/components/notfound.html',
}).then( function ( components ) {

Ractive.components[ 'home' ]      = components.home;
Ractive.components[ 'packs' ]     = components.packs;
....
Ractive.components[ 'addplayer' ] = components.addplayer;
Ractive.components[ 'notfound' ]  = components.notfound;

// dynamically load component based on route
Ractive.components.dynamic = Ractive.extend({
  template: '<component/>',
  components: {
      component: function() {
        this.set('foo','bar'); // I can dynamically set the data here.. but how would I add defaults for each component, within the component?
        return this.get('route');
      }
  },
  oninit: function(){
      this.observe('route', function(){
          this.reset();
      },
      { init: false}
    );
  }
});

var r = new Ractive({
    el: document.body,
    template: '#template',
    data: {
      route: 'home'
    }
});

// Routing. Sets the route... which triggers the component
page('/', index);
 ...
page();

function index() {
  console.log('index');
  r.set('route','home')
}

EDIT

I've read this - which has been a great help :)

https://github.com/ractivejs/component-spec/blob/master/authors.md

In the dynamic component scenario - how would I dynamically update component specific data. I seem to be able to do it when the component tag is hardwired into the page... but not when the component tag is dynamically created. After much playing about in the console - its as if it doesn't see the dynamic component. So things like r.findComponent('home').get() don't work.

Yet, if I put a <home/> tag in the template - it does work.

Also, do components automatically 'tear down' when they're un-rendered?

I'm not 100% sure what you are looking for.

First you create a child component -

var MyWidget = Ractive.extend({
  template: '<div>{{message}}</div>',
    data: {
    message: 'No message specified, using the default'
  }
});

You register this with Ractive runtime

Ractive.components.widget = MyWidget;

Then you create a parent component

var Parent = Ractive.extend({
   template: '<div>
                 <MyWidget message={{widget}} />
             </div>'       
});

You use the parent instance to pass the data to child

// Live instance of parent
new Parent({
  el: 'id',
  data : {
     widget: {
       message : 'Waddup kiddo'
     }
  }
});

data.widget gets mapped to MyWidget's data, in-turn gets the message data.

For more info refer this

Generally there are 3 types of components you will be creating & using -

Self-sufficient Components - It knows everything it needs to know by itself. You don't pass anything to it. It creates it's own data or knows where to get it from. Ex: A logo component which knows by itself where to get the image from.
Dumb Components - They have no intelligence and all the data that it needs should be passed from parent. Like in our example - MyWidget has no idea where and what message stands for. Just renders it. No questions asked. Parent will fetch message and just pass it on.
Smart Components - Components which do some heavy lifting. An example would be Profile component. Parent will pass just a profileID to this, and it knows where to get profile data from, does some ajax calls, knows how to parse and interpret the data, may be even starts a socket and listens to changes etc.

So you decide how you want to make your components, who takes responsibility and think about data-encapsulation then.