Composing Views

One of the best things about Views created with Ripple is that you can compose them within each other to create custom elements.

This allows you to export Views for standalone use, like a List, but then also dynamically render this list within other views.

Custom Elements

Composing views allows you to create custom elements to reference these views. You use the elements attributes to set data on the child view. Here is the example from React using ripple instead.

  var Avatar = ripple('<img src="http://graph.facebook.com/{{username}}/profile" />');
  var Link = ripple('<a href="http://www.facebook.com/{{username}}">{{username}}</a>');

  var Profile = ripple(template)
    .compose('profile-avatar', Avatar);
    .compose('profile-link', Link);

This creates custom elements named avatar and link that we can use within the template. These views are just any other view created with ripple().

  <div class="Profile">
    <profile-avatar username="{{username}}"></profile-avatar>
    <profile-link username="{{username}}"></profile-link>
  </div>

This dynamically creates a view and replaces the custom element. Now we can create a Profile view and render it:

  var profile = new Profile({
    data: {
      username: 'anthonyshort'
    }
  });
  profile.appendTo(document.body);

Which will render:

  <div class="Profile">
    <img src="http://graph.facebook.com/anthonyshort/profile" />
    <a href="http://www.facebook.com/anthonyshort">anthonyshort</a>
  </div>

We can then update the values by setting data on the parent view:

  profile.set('username', 'ianstormtaylor');

Sharing Data

Since we used interpolation in the custom elements username attribute, the views will automatically have this value updated whenever the parent changes. This allows you to pass values down the chain of views and have everything in sync and updated automatically.

You can also use static values if you don't need the value to change:

  <profile-avatar username="anthonyshort"></profile-avatar>