# \[SOLVED\] Including a component within a component

**URL:** <https://forums.bitovi.com/t/solved-including-a-component-within-a-component/613>\
**Category:** DoneJS\
**Created:** [April 25, 2017, 2:05am UTC](https://forums.bitovi.com/t/solved-including-a-component-within-a-component/613 "2017-04-25T02:05:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![nriesco](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nriesco/32/190_2.png) [@nriesco](https://forums.bitovi.com/u/nriesco)\
**Post date:** [April 25, 2017, 2:05am UTC](https://forums.bitovi.com/t/solved-including-a-component-within-a-component/613/1 "2017-04-25T02:05:21Z")

</div>

I’m trying to create a modular component structure that delegates object manipulation to each viewmodel. Instead of creating a huge viewmodel that handles everything the idea is that each viewmodel handles only one “level”.

This code **does not work** , but illustrates the way I was hoping it would work:

**_UPDATE: now the import works correctly, but the binding is not working_**  
**_UPDATE: it works now!!_**

```auto
// person.js
import Component from 'can-component';
import DefineMap from 'can-define/map/';
import './person.less';
import view from './person.stache';
import Person from 'my-app/models/person';
import { ViewModel as AddressViewModel } from 'my-app/viewmodels/address/address';

export const ViewModel = DefineMap.extend({
  newPerson: Person,
  newAddressViewModel: AddressViewModel,
  addNewInstance: function() {
    // this should work initalizing the object
    this.newPerson = {};
    // this is what I would like to do:
    this.newAddressViewModel = {};
    // then invoke a method
    this.newAddressViewModel.addNewInstance();
  },
  saveMe: function() {
    this.newAddressViewModel.newAddress.saveAddress()
      .then(addressData => {
        this.newPerson.addressId = addressData._id;
        this.newPerson.save();
      });
  }
});

export default Component.extend({
  tag: 'my-app-person',
  ViewModel,
  view
});

```

```auto
// address.js
import Component from 'can-component';
import DefineMap from 'can-define/map/';
import './address.less';
import view from './address.stache';
import Address from 'my-app/models/address';
// import Address from 'my-app/models/address';
// import AddressViewModel from 'my-app/viewmodels/address/address';

export const ViewModel = DefineMap.extend({
  newAddress: Address,
  addNewInstance: function() {
    this.newAddress = {};
  },
  saveAddress: function() {
    return this.save();
  }
});

export default Component.extend({
  tag: 'my-app-address',
  ViewModel,
  view
});

```

```auto
// person.stache
<button ($click)="addNewInstance()"></button>
{{#newPerson}}
  Name: <input {($value)}="name" /><br>
  Last Name: <input {($value)}="lastName" /><br>
  Address:<br>
  <can-import from="my-app/viewmodels/address/" />
  <my-app-address {(new-address)}="newAddressViewModel.newAddress" />
{{/newPerson}}

```

```auto
// address.stache
{{#newAddress}}
  Street: <input {($value)}="street" /><br>
  City: <input {($value)}="city" /><br>
{{/newAddress}}

```

This code should result in a form:

Name: […]  
Last Name: […]  
Address:  
Street: […]  
City: […]

Thanks!