3

アプリケーションに追加のオブジェクトを追加してプッシュしようとしています。この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}}と、1 つのトランザクションが表示されます。

私のコードで何が問題になっていますか?

4

3 に答える 3

2

いくつかの変更を加えましたが、改善が必要です。改善のためにさらに質問してください。emberjs ガイドのtodo の例も参照してください。おそらくチュートリアルは時代遅れです。Ember store.push with hasMany does not update template? を参照してください。.

add メソッドを次のようにリファクタリングしました。

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

于 2014-12-20T17:18:11.077 に答える
2

Embers#eachヘルパーは現在のスコープを次のように切り替えます。

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

したがって、アクセスしようとするたびにcontrollers、存在しないトランザクションオブジェクトでアクセスしようとします。あなたがフォローしていたチュートリアルでこれが機能した理由は、そこの人がコントローラーのプロパティにアクセスしようとしなかったからです。これは多くの人を混乱させるため、将来の ember バージョンでは廃止される予定です。

問題を解決するには、使用するだけです

// 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>
于 2014-12-18T07:37:16.320 に答える
1

使用している請求書/編集テンプレート

{{#each controller}}

しかし、問題を引き起こしているのはあなたInvoicesCreateControllerです。ObjectController必要な理由がわからないため#each、テンプレートで使用しないでください。または、本当に必要な場合は を に変更しInvoicesCreateControllerてArrayControllerください。

于 2014-12-24T07:16:55.950 に答える