0

私は emberjs アプリ開発の初心者です。そして、プロジェクトのプロトタイプ「トランザクションページ」に emberjs を使用したいと考えています。

核となるアイデアはシンプルです。ユーザーに表示したいトランザクションのリストがあります。

emberjs でページの簡単なスケルトンを作成しましたが、正しく動作しません。ここにあります - http://jsbin.com/udinar/1/edit

将来的にページにいくつかの機能セクションを追加したいので、ルーターの TransitionTo を特別に使用しました。

また、emberjs のすべての概念を完全には理解していない可能性があるため、コードの改善に関するコメントに感謝します。

ありがとう。

4

1 に答える 1

1

これがjsbinの作業です。

いくつかの命名規則の問題がありますが、最も問題のある部分は、transactions_list正しく解釈されず、機能しないことでした。すべての名前を simple に変更しましたtransactions。また、自動的にインスタンス化されるコントローラーを呼び出そうとしcreateましたが、これは に変更されたextendため、ルートフックなどでまだインスタンス化されていないコントローラーを使用しようとしsetupControllerました。テストできるようにボタンも追加しましたあなたのコントローラのaddTransaction機能。

動作するコードは次のとおりです。

/**************************
* Application
**************************/

App = Em.Application.create({
  ready: function () {
    alert("App was loaded successfully");
  },
  LOG_TRANSITIONS: true,
  rootElement: '#center'
});

/**************************
* Routes
**************************/

App.Router.map(function() {
  this.route("index", {path : "/"});
  this.route("transactions", {path : "/transactions"});
});

App.IndexRoute = Em.Route.extend({
  redirect: function() {
    this.transitionTo("transactions");
  }
});

App.TransactionsRoute = Em.Route.extend({
  model: function () {
    return [App.Transaction.create({id : 1,
         general_status: 'Done',
         user1_status: 'Done',
         user2_status: 'Done'
      }),
      App.Transaction.create({id : 2,
         general_status: 'In progress',
         user1_status: 'Waiting confirm',
         user2_status: 'Done'
      })
    ];
   }
});

/**************************
* Models
**************************/

App.Transaction = Em.Object.extend({
  id: null,
  general_status: null,
  user1_status: null,
  user2_status: null,
  details: null
});

/**************************
* Views
**************************/

App.TransactionsView = Em.View.extend({
  templateName: 'transactions'
});

/**************************
* Controllers
**************************/

App.TransactionsController = Em.ArrayController.extend({
  addTransaction: function(transaction) {
    console.log(transaction);
    //this.pushObject(transaction);
  }
});

編集：コメントの後、ajaxを介してモデルを動的に取得するには、次のことを行う必要があります。

App.TransactionsRoute = Em.Route.extend({
  model: function () {
    return App.Transaction.find();
  }
});

そして、コントローラーで CRUD メソッドを実装します

App.TransactionsController = Em.ArrayController.extend({
  add: function(transaction) {
    //your implementation
  },
  delete: function(transaction) {
    //your implementation
  },
  edit: function(transaction) {
    //your implementation
  }
});

編集

これが新しい作業用のjsbinです。ember-data を追加してストアを定義しました。ストアは ember-data を使用してのみ存在します。トランザクションのフィクスチャも定義したので、データを取得する場所ができます。データが API からのものである場合は、RESTAdapter に切り替える必要があります。

それが役に立てば幸い

于 2013-05-23T22:26:11.383 に答える