javascript - 如何将 emberjs 中的项目列表中的特定项目信息链接到模板

Question

我正在学习 emberjs，并且一直试图从模板上的留置权列表中显示特定的留置权。我成功到达模板，但无法在表格上显示留置权的信息:

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

我主要对 Controller 的使用感到困惑，我确信我需要使用 Controller 才能实现此目的。

这些是我现在拥有的 Controller :

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

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

这些是留置权:

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
  }
];

这就是我在留置权模板的 html 中所做的事情:

  <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>

提前致谢!

Answer 1

您的 LienRoute 中的 model Hook 使用 params.id 执行 findBy

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

params.id 是一个字符串，但您在模型中将 id 定义为整数。为此，您需要将字符串转换为整数，如下所示:

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

此外，当您链接到留置权时，您需要使用

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

传入变量lien而不是

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

因为每次循环时，您的上下文都位于该模型变量内

工作演示 here