2013-06-28 31 views
9

我想在這裏熟悉動態細分。以下是我想實現的目標:Emberjs動態細分:加載路線時出錯:TypeError {}

當我訪問'/#/清單'時,它會在'清單'模板中列出清單模型。這是成功完成的。

當我點擊單個庫存編號時,它將訪問/#/ inventory/1是1是庫存編號,它將啓動「庫存」模板。這也是成功完成的。

然而,當我從地址欄試圖訪問/#/存貨/ 1,直接,當我按下F5,它出來這個錯誤 - Error while loading route: TypeError {}

錯誤的完整列表:

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' 

這裏是我的app.js

Gymi = Ember.Application.create(); 

// Route map 
Gymi.Router.map(function() { 
    this.resource('inventories', { path: '/inventories' }, function() { 
     this.resource('inventory', { path: '/:inventory_id' }); 
    }); 
    this.resource('products'); 
}); 

// inventory models 
Gymi.Inventory = Ember.Object.extend(); 
Gymi.Inventory.reopenClass({ 
    items: [], 
    all: function() { 
     this.items = [{ 
      id: 1, 
      name: 'item1', 
      cost: '20.00', 
      qty: 10 
     }, { 
      id: 2, 
      name: 'item2', 
      cost: '20.00', 
      qty: 10 
     }, { 
      id: 3, 
      name: 'item3', 
      cost: '20.00', 
      qty: 10 
     }, { 
      id: 4, 
      name: 'item4', 
      cost: '20.00', 
      qty: 10 
     }]; 

     return this.items; 
    } 
}) 

// inventory controller 
Gymi.InventoriesController = Ember.Controller.extend({ 
    inventories: Gymi.Inventory.all() 
}); 

這裏是模板:

<script type="text/x-handlebars"> 
<h2>{{title}}</h2> 

<ul> 
    <li>{{#linkTo 'inventories'}}Inventories{{/linkTo}}</li> 
</ul> 

{{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="inventories"> 
<h2>Inventory</h2> 

<table class="table"> 
<tbody> 
{{#each inventory in inventories}} 
    {{#with inventory}} 
    <tr> 
    <td>{{#linkTo 'inventory' inventory}}{{id}}{{/linkTo}}</td> 
    <td>{{name}}</td> 
    <td>{{cost}}</td> 
    <td>{{qty}}</td> 
    </tr> 
    {{/with}} 
{{/each}} 
</tbody> 
</table> 

{{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="inventory"> 
<h4>Inventory</h4> 

<ul> 
    <li>{{id}}</li> 
    <li>{{name}}</li> 
    <li>{{cost}}</li> 
    <li>{{qty}}</li> 
</ul> 
</script> 
+0

不是你要找的答案:但我認爲這是與Ember路由點擊/直接鏈接不同。當你點擊一個鏈接到'/#/ inventory/1'時,它會劫持它並只是加載路由。當您轉到該網址時,它的行爲會有所不同。如果您使用RESTful方式命名URL:您可以將URL更改爲'/#/ inventory/1' – andy

回答

2

這是一個無益的錯誤消息,但關鍵部分在它的末尾。

this.init.apply(this, arguments); 
} has no method 'find' 

當您訪問/inventories/1路線,燼將嘗試查找記錄該ID,使用find,在InventoryRoutemodel掛鉤。在這種情況下,在Inventory。由於它找不到該方法,因此會出現此錯誤。

添加一個Inventory.find方法返回記錄匹配params.inventory_id將解決此問題。

14

不是OP的答案,而是所有在2013年9月1日之後出現錯誤的人,這可能是由於Ember Data更新爲最新的1.0版本。所以,你必須使用

this.store.find('model'); 

而不是

App.Model.find(); 

Read more changes here

+1

謝謝謝謝謝謝謝謝 –

1

如果您的路線缺少model方法的參數,則會顯示此錯誤。

​​

加入缺失params修復:從link-to訪問時/inventory/1但不能從URL打開頁面

下面的代碼工作。此代碼無論從link-to並直接從URL工作:

App.InventoryRoute = Ember.Route.extend({ 
    model: function(params) { 
    this.store.find('inventory', params.inventory_id) 
    } 
}); 

對於燼數據< 0。14這是代碼

App.InventoryRoute = Ember.Route.extend({ 
    model: function(params) { 
    App.Inventory.find(params.inventory_id) 
    } 
});