[英]Ember dynamic segments without emberdata
I'm struggling with the dynamic segments of routes. 我正在努力应对动态路线。 Here is my code
这是我的代码
App.Router.map(function(){
this.resource('stuff', {path: '/stuff/:stuff_id'}, function() {
this.route('make');
this.route('edit');
this.route('delete');
this.route('history');
});
});
App.StuffRoute = Ember.Route.extend({
model: function(param) {
},
setupController: function (){
},
renderTemplate: function() {
}
});
App.StuffView= Ember.View.extend({
defaultTemplate: Ember.Handlebars.compile(stuffTemplate)
});
App.StuffController = Ember.Controller.extend();
What should I put in the model of StaffRoute
that I stop getting No route matched the URL 'crisis'
errors? 在
No route matched the URL 'crisis'
错误的StaffRoute
,应该在StaffRoute
模型中StaffRoute
什么? for localhost/#stuff
and how can I set up properly the dynamic segment part? for
localhost/#stuff
,如何正确设置动态段部分? My only problem with the ember documentation is, that all the examples use ember-data that is not production ready and I don't want to use it. 我对ember文档的唯一问题是,所有示例都使用了尚未准备生产的ember数据,并且我不想使用它。
Without ember-data you would typically put direct getJSON with jQuery inside the model
method on the route. 如果没有ember-data,通常会在路线的
model
方法内放置带有jQuery的直接getJSON。 The model
methods supports promises so you can reuse the jQuery promise. model
方法支持诺言,因此您可以重用jQuery诺言。
For instance given the route to load a list of images for the /images/tag
route using the Flickr api would be, 例如,假设使用Flickr api为
/images/tag
路由加载图像列表的路由是,
App.Router.map(function() {
this.resource('images', { path: '/images/:tag'});
});
App.ImagesRoute = Ember.Route.extend({
model: function(params) {
flickerAPI = 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
console.log('ImagesRoute.model', params);
return jQuery.getJSON( flickerAPI, {
tags: params.tag,
tagmode: 'any',
format: "json"
})
.then(function(data) {
console.log('loaded images', data);
return data;
})
.then(null, function() { console.log('failed to load images'); });
}
});
The corresponding controller can access/bind to the properties of the returned json automatically. 相应的控制器可以自动访问/绑定到返回的json的属性。 Or you can alias a few computed properties.
或者,您可以为一些计算属性添加别名。
App.ImagesController = Ember.ObjectController.extend({
images: function() {
return this.get('model').items;
}.property('controller'),
title: function() {
return this.get('model').title;
}.property('images')
});
And then render it via handlebars using these properties. 然后使用这些属性通过车把渲染。
<script type='text/x-handlebars' data-template-name='images'>
<h1>{{title}}</h1>
{{#each image in images}}
<img {{bindAttr src='image.media.m'}} />
{{/each}}
</script>
Here's a jsbin example that does this. 这是一个执行此操作的jsbin示例 。
'/stuff/:stuff_id'
matches only /stuff/something
, not '/stuff'
. '/stuff/:stuff_id'
仅匹配/stuff/something
,而不匹配'/stuff'
。
Try to define separate resource: 尝试定义单独的资源:
App.Router.map(function(){
this.resource('stuffs', {path: '/stuff'});
this.resource('stuff', {path: '/stuff/:stuff_id'}, function() {
// routes ...
});
or 要么
App.Router.map(function(){
this.resource('stuffs', {path: '/stuff'}, function() {
this.resource('stuff', {path: '/:stuff_id'}, function() {
// routes ...
});
});
and use App.StuffsRoute
, App.StuffsView
and App.StuffsController
for this resource. 并为此资源使用
App.StuffsRoute
, App.StuffsView
和App.StuffsController
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.