javascript - 从 ember.js 中的 Controller 访问模型

Question

我有一个带有模型、路由和 Controller 的简单应用程序。我无法从我的 Controller 中的模型访问数据。我使用 ember-cli，所以我有以下结构:

/app/router.js

var Router = Ember.Router.extend({
  location: config.locationType
});
Router.map(function() {
  this.route('logs',{path: '/'});
});
export default Router;

/app/routes/logs.js

export default Ember.Route.extend({
  controllerName: 'logs',
  model: function() {
    return this.store.find('logs');
  }
});

/app/models/logs.js

export default DS.Model.extend({
  ip: DS.attr('string'),
  timestamp: DS.attr('number'),
  visited_resource: DS.attr('string'),
  pretty_string: DS.attr('string')
});

/app/controllers/logs.js

export default Ember.Controller.extend({
  url: function() {
    var model = this.get('model');
    var basePath = "http://example.com";
    var path = model.visited_resource;
    return basePath+path
  }.property('visited_resource')
});

我的问题是 model.visited_resources 或 this.get('model.visited_resources') 或 this.get('model.[any param]') 未定义。

如果我记录整个模型对象并检查它，我所有的数据都在那里!! http://i.stack.imgur.com/nkvyT.png

只是controller访问不到而已。我究竟做错了什么？

Answer 1

您的模型是查看该屏幕截图的数组 (content: Array[5])，因此如果您想要单个项目，则需要获取第一个对象:

export default Ember.Controller.extend({
  url: Ember.computed('model', function() {
    var logs = this.get('model');
    var firstLog = logs.get('firstObject');
    var path = firstLog.get('visited_resource');
    var basePath = 'http://example.com';
    return basePath + path; 
  });
});

或遍历每个项目并返回一个数组:

export default Ember.Controller.extend({
  urls: Ember.computed('model', function() {
    var logs = this.get('model');
    var basePath = 'http://example.com';
    var urls = logs.map(function(model) {
      var path = model.get('visited_resource');
      return basePath + path;
    });
    return urls;
   })
});

要在模型上创建计算属性，然后在模型上执行:

export default DS.Model.extend({
  ip: DS.attr('string'),
  timestamp: DS.attr('number'),
  visited_resource: DS.attr('string'),
  pretty_string: DS.attr('string'),
  url: Ember.computed('visited_resource', function() {
    var basePath = 'http://example.com';
    var path = this.get('visited_resource');
    return basePath + path;
  })
});

您将像访问任何其他属性一样访问 url 属性:

   export default Ember.Controller.extend({
      url: Ember.computed('model', function() {
        var logs = this.get('model');
        var firstLog = logs.get('firstObject');
        return firstLog.get('url');
      })
    })

您还可以使用 setupController 显式设置模型:

export default Ember.Route.extend({
  controllerName: 'logs',
  model: function() {
    return this.store.find('logs');
  },
  setupController: function(controller, model) {
    controller.set('model', model);

    // or first item only
    controller.set('model', model.get('firstObject'));
  }
});