使用 Ember 动态添加和推送其他对象

Add and push additional objects on the fly with Ember

本文关键字：其他 对象 Ember 动态 添加 使用      更新时间：2023-09-26

我正在尝试在我的应用程序中添加和推送其他对象。我在这个jsbin中复制了这个案例

为了实现这一目标，我遵循了本教程，它完全符合我的需求。

我有一个发票清单，任何发票都是由交易组成的。我可以在发票中创建新发票 创建路由，我想在其中添加和推送任何单个交易。

  actions: {
    add: function() {
      var newTransaction = Ember.Object.create({
        name: "New Transaction",
        quantity: null,
        selectedFare: null,
        isDone: false
      });
      return this.get("content").pushObject(newTransaction);
    }

在我的模板中，这就是它的外观

<tr>
{{#each controller}}
  <td>{{name}} {{input type=checkbox value=isDone checked=isDone}} {{input valueBinding=quantity}} {{view Em.Select prompt="test" contentBinding="controllers.fare.content" optionLabelPath="content.name" optionValuePath="content.id" selectionBinding="controllers.fare.selectedFare" }}</td>
{{/each}}
</tr>

不幸的是，我无法在控制台中真正看到错误。我不知道出了什么问题。

如果从模板中删除{{#each controller}}{{/each}}，则可以看到单个事务。

我的代码出了什么问题？

我做了一些更改，但它需要改进，请随时提出进一步的问题来改进它。另请参阅 emberjs 指南待办事项示例。可能教程已经过时了，请参阅Ember store.push with hasmany不更新模板？。

我像这样重构了你的添加方法：

add: function() {
  var transactionRecord = this.store.createRecord('transaction', {
    name: 'new transaction'
  });
  return this.get("model.transactions").addObject(transactionRecord);
}

循环事务的模板如下所示：

{{#each model.transactions}}

最后，我添加了invoices/index模板，以便您可以在单击发票时查看发票及其交易：

<script type="text/x-handlebars" data-template-name="invoice/index">
  <p> Invoice Index Route</p>
  <p> {{title}} </p>
  <p> Transactions: </p>
    {{#each transactions}}
      <ul>
        <li> name: {{name}} </li>
        <li> quantity: {{quantity}} </li>
      </ul>
    {{/each}}
</script>

示例：http://jsbin.com/gugukewaka/1/edit

余

烬#each助手切换当前作用域，如下所示：

// this context is the controller
{{#each controller}}
 <td>{{name}}<td/> // this context is each transaction
{{/each}}

因此，每当您尝试访问controllers时，您都会尝试在不存在的事务对象上访问它。这在您遵循的教程中起作用的原因是那里的人没有尝试访问控制器属性。不用担心，这会让很多人感到困惑，因此将在未来的余烬版本中弃用。

要解决您的问题，只需使用

// this context is the controller
{{#each transaction in controller}}
 <td>{{transaction.name}}<td/> // this context is still the controller
{{/each}}

或在您的特定用例中：

<tr>
{{#each transaction in controller}}
  <td>{{transaction.name}} {{input type=checkbox value=transaction.isDone checked=transaction.isDone}} {{input valueBinding=transaction.quantity}} {{view Em.Select prompt="test" contentBinding="controllers.fare.content" optionLabelPath="content.name" optionValuePath="content.id" selectionBinding="controllers.fare.selectedFare" }}</td>
{{/each}}
</tr>

在您正在使用的发票/编辑模板中 

{{#each controller}}

但是您的InvoicesCreateController ObjectController导致问题的原因。要么不要在模板中使用#each，因为我不明白为什么需要它，或者如果真的需要它，然后将InvoicesCreateController更改为ArrayController。

相关文章：