Question

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

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

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

我专门使用路由器中的TransitionTo，因为我希望将来在页面上添加一些功能部分。

对于我的代码改进的评论，我将不胜感激，因为我可能并不完全理解所有的概念。

感谢。

Answer 1

你在这里工作jsbin。

在某些命名约定存在问题的情况下，最有问题的部分是transactions_list它没有被正确解释，因此无法正常工作。我已将所有内容重命名为简单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存在。我还为事务定义了Fixtures，因此您可以从中检索，如果您的数据来自API，则应切换到RESTAdapter。

希望有所帮助

基本的emberjs应用程序无法正常工作

1 个答案: