# Programmatically defining and using handlebars templates

**URL:** <https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860>\
**Category:** Design\
**Created:** [October 3, 2013, 5:24pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860 "2013-10-03T17:24:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [October 3, 2013, 5:24pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/1 "2013-10-03T17:24:36Z")

</div>

Does anyone know of any good examples or straightforward documentation that talks about the programatic creation of templates (and by extension components) without explicitly writing out handlebars template code and markup? In either script tags or separate handlebars file.

Perhaps a hello world or ember starter kit example that is pure javascript and does not have any HTML script tags defined.

Is this possible?

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [October 3, 2013, 5:26pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/2 "2013-10-03T17:26:23Z")

</div>

Why would you want to do this? Even ApplicationView uses a string template when setting a default template for ApplicationView. It’s just “{{outlet}}”, why would you not do the same?

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [October 3, 2013, 5:31pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/3 "2013-10-03T17:31:23Z")

</div>

I guess I was just curious if it was possible. Perhaps the use case is that I might want to create an array of component instances and then programmatically push them to DOM.

But mostly just curious if it was possible.

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [October 3, 2013, 5:36pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/4 "2013-10-03T17:36:20Z")

</div>

Curiosity is an attribute of a great mind 🙂

> [@eccegordo](#):
>
> Perhaps the use case is that I might want to create an array of component instances and then programmatically push them to DOM.

I’ve actually seen something similar done before. Checkout the Customer Rendering section on Evil Trout’s blog post about [Custom Views](http://eviltrout.com/2013/04/01/adding-to-discourse-part-3.html#custom_rendering).

---

<div class="post-metadata">

**Author:** ![machty](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/machty/32/13933_2.png) [@machty](https://discuss.emberjs.com/u/machty)\
**Post date:** [October 3, 2013, 6:11pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/5 "2013-10-03T18:11:04Z")

</div>

Try looking here:

[https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/select.js#L21](https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/select.js#L21)

You can override `template` or `defaultTemplate` to possibly achieve what you’re trying to do, if you reaaaally need/want to do it (though it seems unnecessary).

You could feasibly do something like

```nohighlight
  defaultTemplate: function(context, options) {
    options = { data: options.data, hash: {} };
    Ember.Handlebars.helpers.view.call(context, SomeViewOrComponentClass, options);
    Ember.Handlebars.helpers.view.call(context, SomeViewOrComponentClass, options);
    Ember.Handlebars.helpers.view.call(context, SomeViewOrComponentClass, options);
    Ember.Handlebars.helpers.view.call(context, SomeViewOrComponentClass, options);
    Ember.Handlebars.helpers.view.call(context, SomeViewOrComponentClass, options);
  },

```

I haven’t actually tried this out but should probably work without too much crazy hacking.

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [October 3, 2013, 6:30pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/6 "2013-10-03T18:30:52Z")

</div>

Thanks @tarasm and @machty for the links and info. I think I just learn best when I try to understand it from the inside out. Trying to get to the point where I have to refer to the documentation less, because I just know how the underlying code actually works.

And @machty perfect! I didn’t think to go look at how the built in views like select are implemented. Good info there. And helps me understand handlebars a little better too!

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [October 3, 2013, 6:44pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/7 "2013-10-03T18:44:32Z")

</div>

> [@eccegordo](#):
>
> I think I just learn best when I try to understand it from the inside out.

I’m the same way. Sorry if I came across sarcastic, I didn’t mean it that way.

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [October 3, 2013, 6:49pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/8 "2013-10-03T18:49:18Z")

</div>

No not at all. It is all good. Didn’t take anything personal. And by the way great work on the EmberSherpa. I like where that is going.

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [October 3, 2013, 6:50pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/9 "2013-10-03T18:50:53Z")

</div>

Thanks 🙂 I’m working on CRUD without Ember Data Part 2 right now.

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [October 3, 2013, 6:55pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/10 "2013-10-03T18:55:22Z")

</div>

That is a worthy topic. It seems there is still not a lot of info around creating, modifying and committing data and models. Look forward to it.

If you find time, also might be useful to briefly touch about the backend side of that. Basically what should happen when you push data over the wire via PUT and when manipulating with DELETE.

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [October 3, 2013, 7:00pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/11 "2013-10-03T19:00:06Z")

</div>

If all permits, I’ll go down the stack and probably into PHP and Node.js side of things because Rails is well covered by EVERYone else 🙂

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [October 3, 2013, 7:19pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/12 "2013-10-03T19:19:02Z")

</div>

Makes sense. On php are you going to use Symfony? Or vanilla PHP? There is also Yii, which might be of interest.

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [October 3, 2013, 7:23pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/13 "2013-10-03T19:23:51Z")

</div>

I actually haven’t written anything in Symphony or Yii before. I’d love to get a contribution from someone who has.

I haven’t actually seen a good implementation of an API server for PHP. If you know of one, I’d like to look at it.

Rolling one from scratch is not difficult, but I wouldn’t encourage anyone to do it. I’m still unsure about how to handle those scenarios.

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [October 3, 2013, 7:53pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/14 "2013-10-03T19:53:41Z")

</div>

I haven’t done Symfony work since the 1.0 days. But my impression was that it was very rails like. You have a CLI, some generators, actions, ORM (propel, doctrine) and a general MVC architecture. I think Symfony has evolved a bit but haven’t kept up with the 2.0 stuff.

This might have some promise.

[https://github.com/FriendsOfSymfony/FOSRestBundle](https://github.com/FriendsOfSymfony/FOSRestBundle)

If you do get started on this and have any specific questions ping me, I might be able to answer a few things.

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [October 3, 2013, 8:32pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/15 "2013-10-03T20:32:23Z")

</div>

On second thought, I don’t think that people who use Symfony would need help setting up APIs, or at least not the majority of them. Without solid statistics, its difficult to tell but my sense is that there are more people who’re coming from other frameworks than Symfony.

But I really don’t know. I’ll think about it some more when I get to it. I’ll keep you posted.

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [October 3, 2013, 9:03pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/16 "2013-10-03T21:03:56Z")

</div>

Makes sense. Probably best to just focus on a ember example that does all the CRUD stuff. And then theoretically it could talk to any specific backend implementation. It would be cool if people could run with your example and build discrete backends to support the CRUD defined in your example.

In my mind a Create and Delete operation are not truly complete until something happens at the persistence DB layer. So what happens on the server matters. That is all I meant by touching on the topic of backends.

Obviously local storage is one case where server is not necessarily involved.

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [October 3, 2013, 9:05pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/17 "2013-10-03T21:05:47Z")

</div>

I’m working it downwards. First, I want to get to a point where its clear how persistence in browser happens. From there, I’ll work down to interacting with the backends and covering different kinds of backend implementations.

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [October 3, 2013, 9:09pm UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/18 "2013-10-03T21:09:43Z")

</div>

> [@eccegordo](#):
>
> It would be cool if people could run with your example and build discrete backends to support the CRUD defined in your example.

I like this idea. I haven’t thought out it, but I think you’re right.

---

<div class="post-metadata">

**Author:** ![vanthome](https://avatars.discourse-cdn.com/v4/letter/v/8e7dd6/32.png) [@vanthome](https://discuss.emberjs.com/u/vanthome)\
**Post date:** [January 19, 2014, 11:27am UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/19 "2014-01-19T11:27:40Z")

</div>

I tried what @machty proposed because I needed something similar. Unfortunately it works only with a single view. As soon as you instantiate more than one like this, you end up with:

```
Uncaught TypeError: Cannot read property 'templateData' of undefined 

```

---

<div class="post-metadata">

**Author:** ![briangonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/briangonzalez/32/15969_2.png) [@briangonzalez](https://discuss.emberjs.com/u/briangonzalez)\
**Post date:** [July 9, 2014, 7:12am UTC](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860/20 "2014-07-09T07:12:17Z")

</div>

Inside of a view or component:

````auto
var viewClass = Ember.View.extend({ templateName: "path/to/template" });
var view = this.createChildView(viewClass);
var html = view.renderToBuffer().buffer;
```

### UPDATE:

This code works slightly better:

````

var viewClass = Ember.View.extend({ templateName: this.get(‘contentTemplate’) }); var view = this.createChildView(viewClass); var html = view.renderToBuffer().buffer; view.removeFromParent();

```auto

```

[Next page](https://discuss.emberjs.com/t/programmatically-defining-and-using-handlebars-templates/2860.md?page=2)