# Component viewModel

**URL:** <https://forums.bitovi.com/t/component-viewmodel/476>\
**Category:** CanJS\
**Created:** [November 24, 2016, 9:59pm UTC](https://forums.bitovi.com/t/component-viewmodel/476 "2016-11-24T21:59:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![fp\_dev](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@fp\_dev](https://forums.bitovi.com/u/fp_dev)\
**Post date:** [November 24, 2016, 9:59pm UTC](https://forums.bitovi.com/t/component-viewmodel/476/1 "2016-11-24T21:59:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [November 25, 2016, 6:14pm UTC](https://forums.bitovi.com/t/component-viewmodel/476/2 "2016-11-25T18:14:15Z")

</div>

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](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](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.

---

<div class="post-metadata">

**Author:** ![fp\_dev](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@fp\_dev](https://forums.bitovi.com/u/fp_dev)\
**Post date:** [November 28, 2016, 9:29pm UTC](https://forums.bitovi.com/t/component-viewmodel/476/3 "2016-11-28T21:29:58Z")

</div>

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](http://jsbin.com/delekajuza/1/edit?html,js,console,output)

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.

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [November 30, 2016, 11:13pm UTC](https://forums.bitovi.com/t/component-viewmodel/476/4 "2016-11-30T23:13:21Z")

</div>

> [@fp\_dev](#):
>
> 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.

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?

---

<div class="post-metadata">

**Author:** ![fp\_dev](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@fp\_dev](https://forums.bitovi.com/u/fp_dev)\
**Post date:** [December 1, 2016, 8:32am UTC](https://forums.bitovi.com/t/component-viewmodel/476/5 "2016-12-01T08:32:06Z")

</div>

Yes and no 🙂  
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>
```

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [December 2, 2016, 11:59pm UTC](https://forums.bitovi.com/t/component-viewmodel/476/6 "2016-12-02T23:59:43Z")

</div>

@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](https://v3.canjs.com/doc/can-view-import.html)
