为什么我的代码没有更改 emberjs 中的值

Why is my code not changing the value in emberjs?

本文关键字:emberjs 我的 代码 为什么      更新时间:2023-09-26

我正在学习 emberjs,当我按下按钮时,我很难更改布尔值。

这是我在javascript中所做的:

App.LiensController = Ember.ArrayController.extend({
  actions: {
    addToPortfolio: function() {
      this.set('isInPortfolio', true);
      console.log('Action is Happening!');
    }
  }
});
App.LIENS=[
  {
          id: 1,
          apn: 'apn1',
          fips: '01700',
          state: 'CA',
          county: 'Los Angeles',
          address: 'somewhere st123',
          debt: 4000,
          isBiddedOn: false, //check
          isInPortfolio: false
  },
  {
          id: 2,
          apn: 'apn2',
          fips: '01744',
          state: 'FL',
          county: 'Miami',
          address: 'someplace st700',
          debt: 2000,
          isBiddedOn: false, //check
          isInPortfolio: true        
  },
  {
          id: 3,
          apn: 'apn3',
          fips: '05690',
          state: 'FL',
          county: 'Orlando',
          address: 'ExactPlace in st111',
          debt: 2500,
          isBiddedOn: false, //check
          isInPortfolio: false
  }
]; 

我也尝试使用this.toggleProperty('isInProperty');但它对我也不起作用。

这是按钮所在的 html 部分:

 <script type="text/x-handlebars" data-template-name="liens">
    <h2 class="sub-header" >Liens</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>
              <th>IsInPortfolio</th>
            </tr>
          <tbody>
          {{#each lien in model}}
            <tr>
              <td>{{lien.id}}</td>
              <td>{{lien.apn}}</td>
              <td>{{lien.fips}}</td>
              <td>{{lien.state}}</td>
              <td>{{lien.county}}</td>
              <td>{{lien.address}}</td>
              <td>${{lien.debt}}</td>
              <td>{{lien.isBiddedOn}}</td> <!--Check-->
              <td>{{lien.isInPortfolio}}</td>
              <td><button id='addLien' type='button' {{action 'addToPortfolio'}}>Add</button></td>
            </tr>
          {{/each}}
          </thead>
  </script>

我做错了什么?这是JSBIN http://emberjs.jsbin.com/fisifu/8/edit?html,js,output

提前感谢!

您正在循环浏览#each助手中的留置权列表,但您正在尝试更改单个留置权的属性。您需要使用 itemController ,它指定个人留置权的controller,如下所示:

{{#each lien in model itemController='lien'}}

然后,您需要实际创建留置权控制器,并将您在LiensController中的逻辑放入LienController

App.LiensController = Ember.ArrayController.extend({
//   actions: {
//     addToPortfolio: function() {
//       this.set('isInPortfolio', true);
//       console.log('Action is Happening!');
//     }
//   }
});
App.LienController = Ember.ObjectController.extend({
  actions: {
    addToPortfolio: function() {
      this.set('isInPortfolio', true);
      console.log('Action is Happening!');
    }
  }
});

在这里工作演示

有关itemController的更多信息,请单击此处