Emberjs dynamisches Segment: Fehler beim Laden der Route: TypeError {}

Question

Ich versuche hier mit dynamischen Segment vertraut zu werden. Hier ist, was ich erreichen möchte:

Wenn ich auf "/ #/Inventories" zugreifen, wird es das Inventarmodell in der Vorlage "Inventare" auflisten. Dies wird erfolgreich durchgeführt.

Wenn ich auf die einzelne Inventar-ID klicke, wird auf/#/inventories/1 be 1 zugegriffen, und die Inventory-ID wird gestartet. Dies wird ebenfalls erfolgreich durchgeführt.

Allerdings, wenn ich versuche den Zugriff auf/#/Bestände/1 direkt aus der Adressleiste, wenn ich F5 drücken, wird es diesen Fehler aus - Error while loading route: TypeError {}

Die vollständige Liste der Fehler:

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' 

Hier ist meine 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() 
}); 

Hier ist die Vorlagen:

<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> 

Answer 1

Das ist eine nicht hilfreiche Fehlermeldung, aber der Schlüssel ist am Ende davon.

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

Beim Besuch der /inventories/1 Route wird ember versuchen, den Datensatz Nachschlag für die ID, find Verwendung in der InventoryRoute ‚s model Haken. In diesem Fall auf der Inventory. Da es diese Methode nicht finden kann, erhalten Sie diesen Fehler.

Das Hinzufügen einer Methode, die den Datensatz zurückgibt params.inventory_id wird dieses Problem beheben.

Answer 2

Keine Antwort auf das OP, sondern für alle diejenigen, die den Fehler nach dem 1. September 2013 bekommen, könnte es aufgrund der Aktualisierung von Ember Data auf die neueste Version 1.0 sein. So haben Sie

this.store.find('model'); 

Statt

App.Model.find(); 

Read more changes here zu verwenden.

Answer 3

Dieser Fehler wird angezeigt, wenn auf Ihrer Route der Parameter der Methode model fehlt.

Der folgende Code funktioniert, wenn /inventory/1 von einem link-toBesuch aber nicht öffnen Sie die Seite aus der URL:

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

die fehlenden params Fixes Hinzufügen. Dieser Code funktioniert sowohl aus link-to und direkt von der URL:

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

Für Ember-Daten < 0.14 Dies ist der Code

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