ember.js - 基本的 emberjs 应用程序无法正常工作

Question

我是 emberjs 应用程序开发的新手。我想为我的项目使用 emberjs 作为原型“交易页面”。

核心思想很简单。我有一个交易列表，我想向用户显示。

我在 emberjs 上完成了我的页面的简单骨架，但它无法正常工作。它在这里 - http://jsbin.com/udinar/1/edit

我特别使用了路由器中的 TransitionTo，因为我想将来在页面上添加一些功能部分。

并且我将感谢对我的代码改进的评论，因为可能我没有完全理解 emberjs 的所有概念。

谢谢。

Answer 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
  }
});

编辑

Here is your new working jsbin. I've added ember-data and defined a store, the store only exists using ember-data. I've also defined the Fixtures for the transactions so you will have a place to retrieve from, if your data comes from an API you should switch to the RESTAdapter.

Hope it helps