# How to load partials / views / templates dynamicaly in Ember.js

**URL:** <https://discuss.emberjs.com/t/how-to-load-partials-views-templates-dynamicaly-in-ember-js/1812>\
**Category:** Uncategorized\
**Created:** [July 15, 2013, 4:49pm UTC](https://discuss.emberjs.com/t/how-to-load-partials-views-templates-dynamicaly-in-ember-js/1812 "2013-07-15T16:49:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![radum](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/radum/32/14874_2.png) [@radum](https://discuss.emberjs.com/u/radum)\
**Post date:** [July 15, 2013, 4:49pm UTC](https://discuss.emberjs.com/t/how-to-load-partials-views-templates-dynamicaly-in-ember-js/1812/1 "2013-07-15T16:49:41Z")

</div>

So I have the following setup.

On the main page a list of generators is being displayed based on a list coming from a model using fixture data.

Now when one of the generator links is clicked a new page is show with some input fields that are dynamically generated based on that fixture data.

Until this point everything works perfect.

Now when I change the input fields value in the generator page (after selecting one of the generators) to see the changes being updated in some sort of a preview div just bellow my input fields it is easy. I can use `{{generatorFields.0.value}}` to bind the first input field, .1., and so on until I bind all of them.

But as you can imagine each generator has it’s own format and it’s own input fields and I want to create a new .hbs file for each and one of them and then pass that file into the generator page to show the preview.

I solved 0.1% of the problem with a partial. In the generator.hbs file I entered `{{partial "generator-1"}}` and this loads my `_generator-3.hbs` file that contains that `{{generatorFields.0.value}}` bind and it works. But that partial is not dynamic, I need to load a different partial each time I use a different generator. How can I achieve this?

How can I pass the partial name dynamically or load a template based on the model data that I have?

The code used so far is bellow:

**idex.hbs looks like this:**

```
 <table class="table table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Generator name</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {{#each model}}
                <tr>
                    <td>{{id}}</td>
                    <td>{{title}}</td>
                    <td>{{#linkTo 'generator' this classNames="btn btn-mini pull-right"}}Create file{{/linkTo}}</td>
                </tr>
                {{/each}}
                </tbody>
        </table>

```

**generator.hbs**

```
{{#each generatorFields}}
<div class="row-fluid">
    <div class="span4">{{name}}</div>
    <div class="span8">{{view Ember.TextField valueBinding='value' class='span12' placeholder='Type value here…'}}</div>
</div>
{{/each}}

{{partial "generator-1"}}

```

**\_generator-1.hbs**

```
<h1>Project: {{generatorFields.0.value}}</h1>

```

**app.js**

```
App.Store = DS.Store.extend({
    revision: 13,
    adapter: 'DS.FixtureAdapter'
});

App.Router.map(function () {
    this.resource('index', { path: '/' });
    this.resource('generator', {path: '/generator/:generator_id'});
});

App.IndexRoute = Ember.Route.extend({
    model: function () {
        return App.Generator.find();
    }
});

App.Generator = DS.Model.extend({
    title: DS.attr('string'),
    templateName: DS.attr('string'),
    generatorFields: DS.attr('generatorFields')
});

// Fixture data

DS.RESTAdapter.registerTransform('generatorFields', {
    serialize: function(serialized) {
        return Em.none(serialized) ? {} : serialized;
    },
    deserialize: function(deserialized) {
        return Em.none(deserialized) ? {} : deserialized;
    }
});

App.Generator.FIXTURES = [{
    id: 1,
    title: "test 1",
    generatorFields: [
        {id: 1, name: "name 1", value: ""}
    ],
    templateName: "generator-1"
}, {
    id: 2,
    title: "test 2",
    generatorFields: [
        {id: 1, name: "name 1", value: ""},
        {id: 2, name: "name 2", value: ""},
    ],
    templateName: "generator-2"
}];

```

---

<div class="post-metadata">

**Author:** ![Rahul\_Dabhi](https://avatars.discourse-cdn.com/v4/letter/r/f17d59/32.png) [@Rahul\_Dabhi](https://discuss.emberjs.com/u/Rahul_Dabhi)\
**Post date:** [May 12, 2015, 6:58am UTC](https://discuss.emberjs.com/t/how-to-load-partials-views-templates-dynamicaly-in-ember-js/1812/2 "2015-05-12T06:58:25Z")

</div>

I am looking the same thing just difference is I need to load all the child template with data at a time