Component viewModel

Hi,

Is there a way to retrive the viewModel of a component inserted in a stache template after its rendering is completed?

I’m doing this way but I think is not frexible:

// stache
<can-import from="component/mycomponent">
     {{#if isResolved}}
        <my-component></my-component>
     {{/if}}
</can-import>

//mycomponent.js
...
var myMap=can.Map.extend({...});
...
Component.extend({
   tag:"my-component"
   view: stache.from("mycomponent.stache");
   viewModel: myMap,
   events;{
      inserted: function(ev){
        myAppStatus.getComponentViewModel( this.viewModel );
     }
}

Hey @fp_dev, what is myAppStatus?

If it’s another component and you want to bind to a value inside my-component’s viewModel, then I would look at the bindings docs: https://v3.canjs.com/doc/can-component.html

If it’s something outside of your CanJS components, then given an element, you can use can-view-model to get its view model: https://v3.canjs.com/doc/can-view-model.html

If you can share a little more about what you’re trying to accomplish, we can figure out the best pattern/solution.

OK,

I have an application splitted in some Component and I have a class (myAppStatus) that I use to check the rendering status of each Component (if is rendered or not) in order to inizialize objects that belongs to that Component.

In the following example I summarize it with a simple Map object.

JS EXAMPLE

I must the use binding (from the parent to child) to check the loading status, right? And also when I have, let’s say, nested nodes, it’s mandatory to do this way, right?
For instance in the example the loaded variable setted by the “child” component must be binded to a variable in the “parent” component and, from this last element, to a variabile in the “grandfather” component viewModel.

I usually use the approach to split the application in different components (and separate files) and use the can-import to load them dinamically from the stache.template. In such a way, i can use only the inserted/removed event to know when the component is loaded/removed?

Using the can-view-model i got problems because cannot figure when the tag of the compoent will be displayed and so when to check it.

Thank you for your help.

Hm, it seems like each component should be responsible for initializing the objects that belong to it, not a parent component. What’s the reason for having those initialized by the parent and not the child?

Yes and no :slight_smile:
I can initialize the module Component itself (if is a child) when it’s inserted but, since I need some initialisation data coming from the parent, if I implement a {to-child} binding for a property which value is used for the Component initialisation, the bind will be done before the “inserted” event occurs?

I tryed the this way but sometime is fails this is the reason why I changed approach: I wait the Component is fully inserted and, let say, I notify this to the parent in order to init it the Component’s object.

Maybe I have some other code issue? Since I use the dinamic import with the <can-import></can-import> inside the stache template, it seem that it is not loaded when the Component file is imported. I usually protect it with:

<can-import from="component/child/child">
         {{#if isResolved}}
           <child-cmp> </child-cmp>
         {{/if}}
</can-import> 

Maybe should I import the module statically?

<can-import from="component/child/child" />
<child-cmp > </child-cmp>

@fp_dev, if you wouldn’t mind sharing a JS Bin with what you want to do (but doesn’t work), we might be able to figure out a solution faster.

Yes, I believe any bound properties will be available once inserted fires. You’re right about how can-import works too; here are the docs that confirm what you said: https://v3.canjs.com/doc/can-view-import.html