Ember.js 基本应用程序不工作

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

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

我在emberjs上完成了我的页面的简单框架，但它不能正常工作。 就在这里-

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

我将非常感谢大家对我代码的改进提出的意见，因为我可能还没有完全理解所有的概念

谢谢。

这是你的工作

在一些命名约定存在问题的地方，最有问题的部分是

事务列表

没有正确解释，因此无法工作。我已将所有内容重命名为简单的

事务

。此外，您尝试在get自动实例化的控制器上调用

create

，这被更改为

extend

，因此您尝试在routes

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

编辑

这是你的新工作。我添加了余烬数据并定义了一个存储，该存储仅使用余烬数据存在。我还为事务定义了fixture，这样您就可以从中检索数据，如果您的数据来自API，您应该切换到RESTAdapter

---

希望对您有所帮助

谢谢您的回答。但在您的更改之后，模型是在路由器中静态定义的。我想通过ajax从服务器上友好地生成事务列表（并在用户操作时更改它）。我认为在这种情况下，事务列表必须存储在控制器中，并提供更改它的方法（添加、删除等），这是真的吗？如果是这样的话，如何正确实施呢？好的。但是我又遇到了一个问题：）您正在TransactionRouter中使用模型的“find”方法，但是存储本身在哪里，以及如何访问它（“find”方法将是搜索模型的哪里？）？我认为存储在TransactionController的可变“内容”中。是这样吗？我想在页面加载时初始化我的事务列表。我认为我可以在路由器的setupController方法中做到这一点。是这样吗？我试图意识到/改变这一点，但它不起作用。。。请原谅我提出了一个愚蠢的问题，再次感谢你：）别担心，没有愚蠢的问题：）请参阅我的答案的编辑，希望这能帮助你推进你的项目。官方的ember.js文档声明，ember.Data正在积极开发中（不推荐使用）。我希望自己完全控制与服务器的交互（处理错误等）。你能给出一些没有余烬数据的提示吗？非常感谢您的帮助-我的理解正在日益加深：）是的，余烬数据是一个WIP，变化非常迅速。要了解如何在没有余烬数据的情况下使用余烬，您一定要看一看Distance.org项目，它是在没有余烬数据和开放源码的情况下构建的（），还要看一看这篇博文（），这将有助于进一步加深您的理解：）