How to link specific item info to template from list of items in emberjs

Question

I am learning emberjs and I'm stuck on trying to display a specific lien from a list of liens on a template. Im successfully reaching the template but unable to display the lien's info on the table:

http://emberjs.jsbin.com/gaqavu/2/edit?html,js,output

Im mostly confused with the use of controllers, which I'm sure I need to use for this to work.

These are the controllers I have right now:

App.LienController = Ember.ObjectController.extend({
  actions: {
    addToPortfolio: function() {
      this.toggleProperty('isInPortfolio');
    }
  }
});

App.LiensController = Ember.ArrayController.extend({
  itemController:'lien'
});

These are the liens:

App.LIENS=[
  {
          id: 1,
          apn: 'apn1',
          fips: '01700',
          state: 'CA',
          county: 'Los Angeles',
          address: 'somewhere st123',
          debt: 4000,
          isBiddedOn: false, //check later
          isInPortfolio: false
  },
  {
          id: 2,
          apn: 'apn2',
          fips: '01744',
          state: 'FL',
          county: 'Miami',
          address: 'someplace st700',
          debt: 2000,
          isBiddedOn: false, //check later
          isInPortfolio: false        
  },
  {
          id: 3,
          apn: 'apn3',
          fips: '05690',
          state: 'FL',
          county: 'Orlando',
          address: 'ExactPlace in st111',
          debt: 2500,
          isBiddedOn: false, //check later
          isInPortfolio: false
  }
];

This is what I am doing in the html on the lien template:

  <script type="text/x-handlebars" data-template-name="lien">
    <h2 class="sub-header" >Lien</h2>
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>id</th>
              <th>apn</th>
              <th>fips code</th>
              <th>State</th>
              <th>County</th>
              <th>Address</th>
              <th>Debt</th>
              <th>Current Bid</th>
            </tr>
          <tbody>
            <tr>
              <td>{{lien.id}}</td>
              <td>{{apn}}</td>
              <td>{{fips}}</td>
              <td>{{state}}</td>
              <td>{{county}}</td>
              <td>{{address}}</td>
              <td>${{debt}}</td>
            </tr>
  </script>

Thanks in advance!

Answer 1

Your model hook inside your LienRoute does a findBy using params.id

App.LienRoute= Ember.Route.extend({
  model: function(params){
    return App.LIENS.findBy('id', params.id);
  }
});

params.id is a string, but you have id defined in your model as an integer. For this to work, you need to convert the string to an integer as follows:

App.LienRoute= Ember.Route.extend({
  model: function(params){
    return App.LIENS.findBy('id', parseInt(params.id));
  }
});

Also, when you are linking to a lien, you need to use

{{#link-to 'lien' lien tagName='td'}}{{lien.id}}{{/link-to}}

passing in a variable lien as opposed to

{{#link-to 'lien' this tagName='td'}}{{lien.id}}{{/link-to}}

since each time through the loop, your context is inside that model variable

Working demo here