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

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

本文关键字：项目 emberjs 列表 链接 信息      更新时间：2023-09-26

我正在学习 emberjs，但我坚持尝试在模板上显示留置权列表中的特定留置权。我已成功访问模板，但无法在表格上显示留置权的信息：

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

我

主要对控制器的使用感到困惑，我确定我需要使用它才能正常工作。

这些是我现在拥有的控制器：

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>

提前感谢！

LienRoute内的model钩子使用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}}

因为每次通过循环时，您的上下文都在该模型变量中

在这里工作演示

相关文章：