# Creating an interactive component demo page

**URL:** <https://forums.bitovi.com/t/creating-an-interactive-component-demo-page/127>\
**Category:** DoneJS\
**Created:** [January 17, 2016, 9:17pm UTC](https://forums.bitovi.com/t/creating-an-interactive-component-demo-page/127 "2016-01-17T21:17:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbleier](https://avatars.discourse-cdn.com/v4/letter/d/c89c15/32.png) [@dbleier](https://forums.bitovi.com/u/dbleier)\
**Post date:** [January 17, 2016, 9:17pm UTC](https://forums.bitovi.com/t/creating-an-interactive-component-demo-page/127/1 "2016-01-17T21:17:23Z")

</div>

I have the following demo page (created with donejs):

```auto
<script type="text/stache" can-autorender id="log-template">
  	<can-import from="menuboard-manager/utils/logger/" />
  	<mbm-log></mbm-log>
</script>
<script src="../../../node_modules/steal/steal.js"
        main="can/view/autorender/">
</script>

```

Now if I run the following from the console, it works fine:

```auto
 var lvm = $('mbm-log').viewModel();
 lvm.toggle();
 lvm.toggleView();
 lvm.log('Hello');

```

How can I embed this and other calls to my component’s viewModel in the page itself either as a script or bound to buttons and other input/output widgets?

I tried putting it in the steal script (with imports from jquery and my component) but it seems that the viewModel is not yet bound to the component when the steal script runs, so the viewModel is empty and I can’t run any of my methods. If I try it in it’s own script tag, then it doesn’t have access to jquery.

I tried looking at bitballs for an example, but most of the code there is still using the old syntax and seems to be creating a template on the fly and injecting it into a div. But I already have the template created thanks to the donejs generator, but no handle to the viewModel.

thanks,  
Dovid

---

<div class="post-metadata">

**Author:** ![DylanRoss](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/dylanross/32/71_2.png) [@DylanRoss](https://forums.bitovi.com/u/DylanRoss)\
**Post date:** [January 18, 2016, 8:11pm UTC](https://forums.bitovi.com/t/creating-an-interactive-component-demo-page/127/2 "2016-01-18T20:11:11Z")

</div>

I am not sure exactly what you are looking for, but if the buttons can be in the `#log-template`, you could do this for example:

```auto
<!-- export the component's viewmodel to the references scope (1-way bound) -->
<mbm-log {^.}="*lvm"></mbm-log>
<input type="button" value="Toggle" ($click)="*lvm.toggle()">
<input type="button" value="ToggleView" ($click)="*lvm.toggleView()">
<input type="button" value="Log" ($click)="*lvm.log('Hello')">

```

---

<div class="post-metadata">

**Author:** ![dbleier](https://avatars.discourse-cdn.com/v4/letter/d/c89c15/32.png) [@dbleier](https://forums.bitovi.com/u/dbleier)\
**Post date:** [January 19, 2016, 9:25pm UTC](https://forums.bitovi.com/t/creating-an-interactive-component-demo-page/127/3 "2016-01-19T21:25:08Z")

</div>

@DylanRoss, thanks! That is exactly what I was looking for.