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

时间:2015-01-13 18:30:19

标签: javascript templates ember.js

我正在学习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>

提前致谢!

1 个答案:

答案 0 :(得分:1)

model LienRoute findBy内的params.id 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}} 定义为整数。为此,您需要将字符串转换为整数,如下所示:

{{1}}

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

{{1}}

传入变量{{1}}而不是

{{1}}

因为每次循环,你的上下文都在那个模型变量

工作演示here