后退和前进按钮不在ember rails app中呈现模板

时间:2013-06-18 21:14:26

标签: ruby-on-rails ember.js

我总是在构建在rails后端的ember应用程序中遇到此问题。我有一个groups.hbs模板,列出了一堆组,当你点击一个组时,它会加载groups模板旁边的group.hbs模板,并将url更改为/ groups /:group_id。

但是,当我单击后退和前进按钮,或者尝试手动加载具有特定的组的URL时:group_id组模板无法呈现并且控制台抛出巨大的

Uncaught TypeError: Object function () {
  ...

错误。

group.js.coffee

App.Group = Ember.Object.extend()

App.Group.reopenClass
  all: ->
    App.ajax(
      url: App.apiUrl('/groups')
    ).then (data) ->
      console.log data
      groups = []
      for group in data.response
        groups.addObject(App.Group.create(group))
      console.log(groups)
      groups

router.js.coffee

Mdm.Router.map ->
  @resource 'groups', ->
    @resource 'group', {path: "/:group_id"}

Mdm.Router.reopen
  location: 'history'

在构建独立的ember应用程序时,我从未遇到过这个问题。知道会导致这种情况的原因吗?

修改

我应该补充一点,我是通过XHR请求从api中提取数据的。

编辑2

我只是显式创建了GroupRoute并让它加载了所有组,这段代码与GroupsRoute相同。模板仍然无法渲染,但我不再收到该错误。

GroupRoute

App.GroupRoute = Ember.Route.extend(model: ->
  App.Group.all()
)

和GroupsRoute:

App.GroupsRoute = Ember.Route.extend(model: ->
  App.Group.all()
)

编辑3

如果对任何人都有帮助,这就是整个错误。

Uncaught TypeError: Object function () {
    if (!wasApplied) {
      Class.proto(); // prepare prototype...
    }
    o_defineProperty(this, GUID_KEY, undefinedDescriptor);
    o_defineProperty(this, '_super', undefinedDescriptor);
    var m = meta(this);
    m.proto = this;
    if (initMixins) {
  // capture locally so we can clear the closed over variable
  var mixins = initMixins;
  initMixins = null;
  this.reopen.apply(this, mixins);
}
if (initProperties) {
  // capture locally so we can clear the closed over variable
  var props = initProperties;
  initProperties = null;

  var concatenatedProperties = this.concatenatedProperties;

  for (var i = 0, l = props.length; i < l; i++) {
    var properties = props[i];

    Ember.assert("Ember.Object.create no longer supports mixing in other definitions, use createWithMixins instead.", !(properties instanceof Ember.Mixin));

    for (var keyName in properties) {
      if (!properties.hasOwnProperty(keyName)) { continue; }

      var value = properties[keyName],
          IS_BINDING = Ember.IS_BINDING;

      if (IS_BINDING.test(keyName)) {
        var bindings = m.bindings;
        if (!bindings) {
          bindings = m.bindings = {};
        } else if (!m.hasOwnProperty('bindings')) {
          bindings = m.bindings = o_create(m.bindings);
        }
        bindings[keyName] = value;
      }

      var desc = m.descs[keyName];

      Ember.assert("Ember.Object.create no longer supports defining computed properties.", !(value instanceof Ember.ComputedProperty));
      Ember.assert("Ember.Object.create no longer supports defining methods that call _super.", !(typeof value === 'function' && value.toString().indexOf('._super') !== -1));

      if (concatenatedProperties && indexOf(concatenatedProperties, keyName) >= 0) {
        var baseValue = this[keyName];

        if (baseValue) {
          if ('function' === typeof baseValue.concat) {
            value = baseValue.concat(value);
          } else {
            value = Ember.makeArray(baseValue).concat(value);
          }
        } else {
          value = Ember.makeArray(value);
        }
      }

      if (desc) {
        desc.set(this, keyName, value);
      } else {
        if (typeof this.setUnknownProperty === 'function' && !(keyName in this)) {
          this.setUnknownProperty(keyName, value);
        } else if (MANDATORY_SETTER) {
          Ember.defineProperty(this, keyName, null, value); // setup mandatory setter
        } else {
          this[keyName] = value;
        }
      }
    }
  }
}
finishPartial(this, m);
delete m.proto;
finishChains(this);
this.init.apply(this, arguments);
  } has no method 'find'

修改

所以我想我找出了问题,当你点击后退按钮或输入手动网址时,它没有找到基于id的obkect。所以我在Group模型中添加了一个find()方法。看起来不是这样的:

Mdm.Group = Ember.Object.extend()

Mdm.Group.reopenClass
  all: ->
    Mdm.ajax(
      url: Mdm.apiUrl('/groups')
    ).then (data) ->
      console.log data
      groups = []
      for group in data.response
        groups.addObject(Mdm.Group.create(group))
      console.log(groups)
      groups

  find: (group_id) ->
    Mdm.ajax(
      url: Mdm.apiUrl("/groups/#{group_id}")
    ).then (data) ->
      renderTemplate: (data)

我的GroupRoute看起来像这样:

Mdm.GroupRoute = Ember.Route.extend
  model: (params) ->
    console.log 'oh hai'
    Mdm.Group.find(params.group_id)

现在在控制台中,当我单击后退按钮时,它正在加载数据,但它没有将组模板与group_id相关联。告诉灰烬这样做的最佳做法是什么?

1 个答案:

答案 0 :(得分:0)

我不是铁轨开发人员,但尝试为上面显示的简单模型/路线设置做类似的事情

App.Group = Ember.Object.extend().reopenClass
  groups: []
  find: ->
    $.ajax
      url: "/api/groups/"
      type: "GET"
      cache: false
      dataType: "json"
      beforeSend: =>
        @groups.clear()
      success: (results) =>
        [@groups.addObject(App.Group.create(result)) for result in results]
      error: =>
        alert "error: failed to load the available groups"
    @groups

App.Router.map ->
  @resource "groups", path: "/", ->
    @route "group", path: "/:group_id"