# What's the best way to pass a model to a component?
**URL:** https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191
**Category:** CanJS
**Created:** [March 18, 2016, 1:56am UTC](https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191 "2016-03-18T01:56:38Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@marshallswain](https://forums.bitovi.com/u/marshallswain)
#### Post date: [March 18, 2016, 1:56am UTC](https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191/1 "2016-03-18T01:56:38Z")
When developing components that interact with a model, in order to pass the model into the component, I’m currently setting up the model on the parent component’s viewModel and passing it in as an attribute on the child component. Here’s a pseudo-code/abbreviated example:
```auto
// parent-component viewModel
import TxnModel from 'app-name/models/transaction';
viewModel: {
TxnModel
};
```
```auto
```
This is working just fine, but I’d like to see a way to import the model directly in the template, since in most cases I don’t really need it in the parent component. **Is there an existing way to do this?**
```auto
```
Also, I’d prefer to use the adjacent (non-nested) structure, to avoid the async “pyramid of doom” in the html markup:
```auto
```
---
### Author:  [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)
#### Post date: [March 18, 2016, 3:00am UTC](https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191/2 "2016-03-18T03:00:45Z")
Yes. I think @matthewp made another forum post about this. I’m on my cell so can’t easily search.
Basically you can export from an import with the normal view binding syntaxes to a reference scope.
---
### Author:  [@marshallswain](https://forums.bitovi.com/u/marshallswain)
#### Post date: [March 18, 2016, 3:26am UTC](https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191/3 "2016-03-18T03:26:47Z")
Cool. Thanks. I’ll look for it.
---
### Author:  [@marshallswain](https://forums.bitovi.com/u/marshallswain)
#### Post date: [March 18, 2016, 3:36am UTC](https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191/4 "2016-03-18T03:36:18Z")
I think it might be this one: [Using 2.3 binding syntax to import and use partials](http://forums.bitovi.com/t/using-2-3-binding-syntax-to-import-and-use-partials/22)
Does this mean that I should be able to do this:
```auto
```
Or would I need to use the \* to pass it into the child-component? Like this:
```auto
```
---
### Author:  [@marshallswain](https://forums.bitovi.com/u/marshallswain)
#### Post date: [March 18, 2016, 3:40am UTC](https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191/5 "2016-03-18T03:40:54Z")
Also, help me understand this better. Should the asterisk in `*TxnModel` make the `TxnModel` variable available to a “distant cousin” component, like in this example:
```auto
```
Or would I need to use `../` in some way to get it out to that level: `{^value}="../*TxnModel"` to get it up another level?
---
### Author:  [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)
#### Post date: [March 18, 2016, 12:12pm UTC](https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191/6 "2016-03-18T12:12:14Z")
@marshallswain `*REF` keys are references to a template variables:
[https://canjs.com/docs/can.stache.key.html#section\_templatevariableoperator\_](https://canjs.com/docs/can.stache.key.html#section_templatevariableoperator_)
[https://canjs.com/docs/can.view.bindings.reference.html](https://canjs.com/docs/can.view.bindings.reference.html)
There’s one context for variables for the entire template. This means there’s only one `*TxnModel` allowed for everything.
Because you are exporting a function, you might need the `@` symbol to keep stache from running the function and getting its return value. Making your template look like:
```auto
```
---
### Author:  [@marshallswain](https://forums.bitovi.com/u/marshallswain)
#### Post date: [March 20, 2016, 8:48pm UTC](https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191/7 "2016-03-20T20:48:09Z")
It looks like with a generated SuperModel, since it exports both a default export and `connection`, this is the syntax you have to use. It’s pretty much the same as what you posted. Thank for your help.
```auto
{{#if *TxnModel}}
{{/if}}
{{#if *TxnModel}}
{{/if}}
```
---
### Author:  [@ilyavf](https://forums.bitovi.com/u/ilyavf)
#### Post date: [April 28, 2017, 2:03pm UTC](https://forums.bitovi.com/t/whats-the-best-way-to-pass-a-model-to-a-component/191/8 "2017-04-28T14:03:35Z")
Here is what worked for me:
```auto
```
testing:
```auto
> canViewModel('biggest-movers-grid').model
function BiggestMovers(){return __.apply(this,arguments)}
> new canViewModel('biggest-movers-grid').model( { } )
BiggestMovers
```