Some background. My app is a collection of many single page apps using routing to determine which app to load. It is using Steal. And I like to keep my models, controls and views each in their own files and use Steal to steal the files pieces it needs. Plus I like the organization it gives to the structure and code of my app.
I would like to do the same with can.components, but I am wondering what the best way to do this is. Let's say I wanted to create a component that was a panel what could be filled with whatever content. I want to be able to use this component in any of my apps.
I created a file named panel.js that looks like the following:
- steal('can','myapp/components/panel/views/panel.mustache','myapp/helpers/mustache_helpers.js', function(can, contentPanelTmpl) {return function(scope) {can.Component.extend({tag: 'content-panel',template: contentPanelTmpl,scope: scope});};});
When Steal'ed (or is it Stolen), this returns a function that takes a scope which gets passed to the component, allowing the caller to set scope to whatever it likes.
It gets called like this:
- ContentPanel({appTitle: 'someTitle',iconClass: 'iSettings'});
Is this is good pattern? Is there a better way to accomplish this?
Here is what panel.mustache looks like:
- <div class="widget small coolInset"><div id="panelHeader" class="head"><h5 class="{{iconClass}}">{{l10n appTitle}}</h5></div><div class="body"><div id="panelContent" class="panel">Here is some content</div></div></div>
I'd like to be able to pass in on the scope the tags that should replace "Here is some content". I will then have a different control that will be associated with those tags which will generate the content for the panel.
- ContentPanel({appTitle: 'appTitle',iconClass: 'iSettings',contentTag: can.view.mustache("<players-settings></players-settings>")});
And then replaced "Here is some content" with {{<contentTag}}, but apparently that is not correct.
How would one do that?
Basically in any app I want to be able to say "create a content panel component and fill it with this other component".