ember.jsember.js-view

Ember.js Linking to different objects with custom templates


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>

Solution

  • 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