can we nest components inside component

[devmondo]

sorry for asking to much, please stop me when you want :)

a perfect case for this is a tab-set, so we should be able to do this

<tab-set>
<tab-item>i must be able to add any content here if i want</tab-item>
<tab-item></tab-item>
</tab-set>

so as you see from above, we can nest tab items, also we have the ability to put custom html inside each tab item.

thanks in advanced.

[crcn]

No problem - glad to help.

You can easily do this by extending paperclip.Component. See paperclip.Component(options) in the advanced docs here: http://paperclipjs.com/advanced-api.

Builtin components already do this too. Here are a few examples:

https://github.com/mojo-js/paperclip.js/blob/master/lib/components/repeat.js
https://github.com/mojo-js/paperclip.js/blob/master/lib/components/show.js
https://github.com/mojo-js/paperclip.js/blob/master/lib/components/unsafe.js

And another example:

// print out hello 100 times
var tpl = pc.template("<hello count='100'>{message}</hello>", {
  components: {
    hello: pc.Component.extend({

      /**
       * called whenever the component changes, such as attributes.
       */

      update: function() {
        this._renderChildren();
      },

      /**
       */

      _renderChildren: function() {

        // do just one render
        if (this._renderedChildren) return;
        this._renderedChild = true;

        var count = Number(this.attributes.count);

        var child = this.childTemplate.view({

          // important! needed to ensure that this view 
          // inherits properties from the parent
          parent: this.view
        });

        for (var i = count; i--;) {
          this.section.appendChild(child.render());
        }
      }
    })
  }
});

Note that you don't have to use the extend keyword. es6's extends keyword should work as well.

[devmondo]

this is awesome, pure pleasure to read, thank you very much man :)

speaking of ES6 Syntax, how can i rewrite this in Class style

like

export class TabSet{
this.compoenent; 
  update() {
        this._renderChildren();
      },
rest of code
}

[crcn]

should work:

class TabSet extends pc.Component {
  update() {
    this._renderChildren();
  }
}

[devmondo]

oh so i should extend, so obvious :)

i am trying to think of a way to extend automatically, so just creating plan class without using extend statement, the idea is for example a router will point to the standard class and link it with a view, i am still not certain how to do it, but it would be great,