控制器和模型数据存储访问ember.js

时间:2013-09-05 00:55:02

标签: model ember.js controller

我目前正在使用“ember-1.0.0-rc.7.js”来管理我的ember应用程序的持久性和数据存储。

user.js的

App.User = DS.Model.extend({
    firstName:     DS.attr('string'),
    lastName:      DS.attr('string'),
    category:      DS.attr('string'),
    status:        DS.attr('string'),
    position:      DS.attr('string'),
    fullName:      function()
    {
       return '%@ %@'.fmt(this.get('firstName'), this.get('lastName'))
    }.property('firstName', 'lastName')
});

App.User.FIXTURES = 
[
 {
   id:          1,
   firstName:   'Derek',
   lastName:    "H",
   category:    "admin",
   status:      "offline",
   position:    "3232"
 },
 {
   id:          2,
   firstName:   'Jim',
   lastName:    "H",
   category:    "admin",
   status:      "online",
   position:    "322"
 }
];

UserListController.js

App.UserListController = Ember.ArrayController.create({
    content: [],
    users: App.User.find()
});

store.js

App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});

从上面开始,我假设App.User.find()会将所有用户都返回给我。但是,我收到以下错误:

来自Firebug的错误:

Your application does not have a 'Store' property defined. Attempts to call 'find' on model classes will fail. Please provide one as with 'YourAppName.Store = DS.Store.extend()'
TypeError: store is undefined

该消息没有意义,但商店是为App定义的。如果未定义商店,则以下代码将无效。

在下面的代码中,我在路由的上下文中调用App.User.find()并且它可以工作。

router.js

Bib.Router.map(function () {
  this.resource('index', { path: '/' });
});


App.IndexRoute = Ember.Route.extend({
  model: function () {
    return ['a','b', 'c' ];
  },
  renderTemplate: function () {
        this.render();
        this.render('userList', { outlet: 'userList', into: 'application', controller: App.UserListController });//render the list in list outlet
  },
  setupController: function (controller, model) 
  {
     controller.set('menu', model);
     controller.set('test', App.User.find());
  }
});

在index.html

<script type="text/x-handlebars" id="userList" data-template-name="userList">
   {{#each controller}}
       {{firstName}}
   {{/each}}
</script>

我希望那里的控制器代表UserListController并让它具有对用户模型的引用。请记住,我无法将其连接到路线中,因为我只有一条路线可用于此应用程序。

我认为这是由于我正在打电话的背景。换句话说,在Controller中使用它。我可能不理解控制器和模型如何相关的基本概念。

任何建议表示赞赏, 谢谢, d

2 个答案:

答案 0 :(得分:4)

可以在控制器内进行find次呼叫。但是,这并不是UserListController.js中发生的事情。

您正在呼叫Ember.ArrayController.create而不是Ember.ArrayController.extend。也就是说,您正在创建ArrayController的全局实例,而不是定义新的控制器类。

在进行find调用时,评估UserListController.js时,尚未设置您定义的商店。

您可以通过删除此代码然后在应用启动后在浏览器控制台中对其进行评估来查看此内容。

但是,创建全局控制器并在其上手动设置数据是一种不鼓励的模式。 Ember应用程序中的常见模式是创建控制器类,这些控制器类被实例化,然后通过路由填充数据。

例如:

App.Router.map(function () {
  this.resource('user', { path: '/' });
});

App.UserIndexRoute = Ember.Route.extend({
  model: function () {
    return App.User.find();
  }
});

这会自动创建一个UserIndexController Ember.ArrayController并将其content设置为App.User.find()

现在,这是一个简化的例子,而不是你想要做的事情。您似乎希望将存储在UserListController中的用户列表呈现到主模板的插座中。

要做到这一点,你需要这样的东西:

App.Router.map(function() {
  // you don't need to create an index resource
  // an IndexRoute is created by default
});

App.UserListController = Ember.ArrayController.extend();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['a', 'b', 'c'];
  },

  setupController: function (controller, model) {
    controller.set('menu', model);
    this.controllerFor('userList').set('content', App.User.find());
  },

  renderTemplate: function() {
    var controller = this.controllerFor('userList');
    this.render();
    this.render('userList', {controller: controller});
  }
});

答案 1 :(得分:2)

问题可能是由users: App.User.find()行引起的。可能在首次评估模型时调用find(),这可能是在定义商店之前调用的。 Ember Way(tm)将使用该路径为您的控制器设置模型。从路由中的model方法返回的任何内容都将设置为控制器中的'content'属性。

App.UserListRoute = Ember.Route.extend({
  model: function() {
    return App.User.find();
  }
});

App.UserListController = Ember.ArrayController.create({
  // you don't need anything here 
  // the model from the route will be set to 'content'
});

如果您需要将'content'属性设置为空白,并且您需要将该列表存放在'users'属性中,则可以执行此操作。

App.UserListRoute = Ember.Route.extend({
  setupController: function() {
    this.controller.set('content',[]);
    this.controller.set('users', App.User.find());
  }
});

App.UserListController = Ember.ArrayController.create({
  // still don't need anything here
});