[英]Emberjs dynamic segment: Error while loading route: TypeError {}
I'm trying to get familiar with dynamic segment here. 我想在这里熟悉动态细分。 Here is what I want to achieve:
这是我想要实现的目标:
When i access '/#/inventories', it will list the inventory model in the 'inventories' template. 当我访问'/#/ inventoryories'时,它会在'库存'模板中列出库存模型。 This is done successfully.
这是成功完成的。
When i click on the individual inventory id, it will access /#/inventories/1 be 1 is the inventory id, and it will fire up the 'inventory' template. 当我点击单个广告资源ID时,它将访问/#/ inventoryories / 1为1是库存ID,它将启动“广告资源”模板。 This is done successfully as well.
这也成功完成了。
However when i try to access /#/inventories/1 directly from the address bar, when i press F5, it comes out this error - Error while loading route: TypeError {}
但是,当我尝试直接从地址栏访问/#/ inventoryories / 1时,当我按F5时,它会出现此错误 -
Error while loading route: TypeError {}
The full list of error: 完整的错误列表:
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'
Here is my app.js
: 这是我的
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()
});
Here is the templates: 这是模板:
<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>
Not an answer to the OP but to all those who are getting the error after Sept 1, 2013, it might be due to the update of Ember Data to the latest 1.0 version. 不是OP的答案,而是对于2013年9月1日之后收到错误的所有人,可能是由于Ember Data更新到最新的1.0版本。 So you have to use
所以你必须使用
this.store.find('model');
Instead of 代替
App.Model.find();
That's an unhelpful error message, but the key part is at the end of it. 这是一个无用的错误消息,但关键部分是它的结尾。
this.init.apply(this, arguments);
} has no method 'find'
When you visit the /inventories/1
route, ember will try to lookup the record for that id, using find
, in the InventoryRoute
's model
hook. 当你访问
/inventories/1
路由时,ember将尝试使用find
在InventoryRoute
的model
钩子中查找该id的记录。 In this case on the Inventory
. 在这种情况下,
Inventory
。 Since it can't find that method you get this error. 由于找不到该方法,因此会出现此错误。
Adding an Inventory.find
method that returns the record matching params.inventory_id
will fix this issue. 添加一个返回与
params.inventory_id
匹配的记录的Inventory.find
方法将解决此问题。
This error appears if your route is missing the parameter of the model
method. 如果您的路径缺少
model
方法的参数,则会出现此错误。
The following code works when visiting /inventory/1
from a link-to
but not opening the page from the URL : 从
link-to
访问/inventory/1
但不从URL打开页面时,以下代码有效:
App.InventoryRoute = Ember.Route.extend({
model: function() {
this.store.find('inventory', params.inventory_id)
}
});
Adding the missing params
fixes. 添加缺失的
params
修复。 This code works both from a link-to
and directly from the URL: 此代码可以从
link-to
URL直接使用:
App.InventoryRoute = Ember.Route.extend({
model: function(params) {
this.store.find('inventory', params.inventory_id)
}
});
For ember-data < 0.14 this is the code 对于ember-data <0.14,这是代码
App.InventoryRoute = Ember.Route.extend({
model: function(params) {
App.Inventory.find(params.inventory_id)
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.