Define a component used as list element

Question

I have a component that I'd like to use as some kind of list element:

var ListElement = Ractive.extend({
    // the template defining the look of each list element 
    // is currently defined within a <script> block
    template: '#listElementTmpl';
});

Furthermore, I have some kind of parent maintaining the list and its elements:

var App = Ractive.extend({
    template: 'appTmpl',

    components: {
        ListElement: ListElement
    },

    data: {
        listElements: []
    },

    add: function(info) {
        var element = new ListElement({
            data: {
                info: info
            }
        });
        this.push('listElements', element);
    }
});

Finally, I would define the App's template as something like:

<div>
    {{#each listElements}}
        <ListElement />
    {{/each}}
</div>

The list elements are drawn as defined in their template, but, unfortunately, the data binding somehow somewhere got lost. Can anyone tell me, what I am missing?

score 1 · Accepted Answer · answered Feb 10 '16 at 22:38

You don't create the component elements, you simply modify the data and ractive will create the components for you.

var ListElement = Ractive.extend({
    template: '#listElementTmpl'
});

var App = Ractive.extend({
    template: '#appTmpl',

    components: {
        ListElement: ListElement
    },

    add: function(info) {
        this.push('list', { info } );
  this.set('newInfo');
    }
});

new App({ 
    el: document.body,
    data: { 
        list: [{
         info: 'some info from first item'
     }] 
    }
});

<script src="http://cdn.ractivejs.org/edge/ractive.min.js"></script>

<script id='appTmpl' type='text/ractive'>
 <ul>
  {{#each list}}
   <ListElement info='{{info}}'/>
  {{/each}}
 </ul>
 <div>
  <input value='{{newInfo}}'>
  <button on-click='add(newInfo)'>add</button>
 </div>
</script>

<script id='listElementTmpl' type='text/ractive'>
 <li>{{info}}</li>
</script>

Thank you very much. My way of thinking about components was totally in the wrong direction. Now I even understand your answer [here](https://stackoverflow.com/questions/34462624/what-is-the-difference-between-a-ractive-template-partial-and-component) -- especially the part explaining the 3 different kind of components. Still, I'm wondering if it is possible to introduce some kind of "view logic" into my component ListElement given your solution. I'm thinking about some functions added to the component where data attached to the component is manipulated. Am I able to do something like this? — johncalls, Feb 11 '16 at 10:01
> Am I able to do something like this? Would need more specific details and a pseudo-example of what you're trying to accomplish. — martypdx, Feb 11 '16 at 17:13

Define a component used as list element

1 Answers1