Ember.js Linking to different objects with custom templates

Question

I have the following code for generating links to objects and I have a template that renders it but I would like to have each item in the list call either a different template or display different items. Is this possible?

  <div class="main-content container"> 
            <div class="container-fluid">
              <div class="col-xs-3">
                <div class="span3">
                  <table class='table'>
                    <thead>
                      <tr><th><h3>Select Your Source</h3></th></tr>  
                        {{#each refRecord in model}}
                          <tr><td>  
                          {{#link-to 'ref' refRecord classNames="fullwidth"}}{{refRecord.type}}{{/link-to}}
                          </td></tr>    
                        {{/each}}
                  </table>
                </div>
              </div>
                <div class="col-xs-9">
                  {{outlet}}
                </div>      
            </div>
        </div>

Answer 1

I'm not sure if I've understood correctly, but I took your question in two ways, either they link to a different template, or they render each item different in the list.

Link to different templates

You can create dynamic link-to using a property instead of a string in the link-to statement.

<ul>
  {{#each item in model}}
    <li>{{#link-to item.template item}}{{item.color}}{{/link-to}}</li>
  {{/each}}
</ul>

http://emberjs.jsbin.com/xarixiyu/1/edit

Render each item different

This is a bit different since render doesn't allow taking a property and resolving the name dynamically. But you can still use an if statement and render different items differently.

{{#each item in model}}
  <li>
    {{#if item.foo}}
      {{render 'foo' item}}
    {{/if}}
    {{#if item.bar}}
      {{render 'bar' item}}
    {{/if}}
  </li>
{{/each}}

http://emberjs.jsbin.com/xarixiyu/2/edit