Component viewModel

CanJS
1

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 );
     }
}
2

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.

3

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.

4

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?

5

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>
6

@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