如何从父数组视图显示子对象视图
How to display child object view from parent array view
我有下面显示产品列表。当我点击一个产品时,我只希望看到产品信息。
我设法获得产品信息的唯一方法是在父产品模板上使用{{outlet}}
或{{render}}
,这不是我想要的。
var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend({
});
App.ProductsController = Ember.ArrayController.extend({
sortProperties: ['id']
});
App.Router.map(function () {
this.resource('products', function () {
this.resource('product', { path: ':product_id' });
});
});
App.ProductsRoute = Ember.Route.extend({
model: function () {
return App.Products.find();
}
});
// Models
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
App.Products = DS.Model.extend({
title: DS.attr('string'),
artist: DS.attr('string'),
image: DS.attr('string'),
price: DS.attr('number'),
url: DS.attr('string')
});
App.Products.FIXTURES = [
{
id: 1,
title: 'The Door',
artist: 'Religious Knives',
image: 'http://ecx.images-amazon.com/images/I/51og8BkN8jL._SS250_.jpg',
large_image: 'http://ecx.images-amazon.com/images/I/51og8BkN8jL._SS500_.jpg',
price: 9.98,
url: 'http://www.amazon.com/Door-Religious-Knives/dp/B001FGW0UQ/?tag=quirkey-20'
},
//etc etc
];
-------------MARKUP------------
<script type="text/x-handlebars" data-template-name="products">
<span>{{ controller.model.length }} item(s) in stock</span>
<div>
{{#each product in controller.model}}
<div class="item">
<div class="item-image">
{{#linkTo "product" product}}
<img {{bindAttr src="product.image" alt="product.title"}}>
{{/linkTo}}
</div>
<div class="item-artist">{{product.artist}}</div>
<div class="item-title">{{product.title}}</div>
<div class="item-price">${{product.price}}</div>
</div>
</div>
{{/each}}
{{render product}}
</script>
<script type="text/x-handlebars" data-template-name="product">
<div class="item-detail">
<div class="item-image">
<img {{bindAttr src="large_image" alt="title"}} />
</div>
<div class="item-info">
<div class="item-artist">{{artist}}</div>
<div class="item-title">{{title}}</div>
<div class="item-price">${{price}}</div>
<div class="item-form">
<p>
<label>Quantity:</label>
<input type="text" size="2" data-bind="value: quantity" />
</p>
<p>
<button data-bind="click: $parent.addItem">Add to Cart</button>
</p>
</div>
<div class="item-link"><a {{bindAttr href="url"}}">Buy this item on Amazon</a></div>
<div class="back-link"><a href="#/">« Back to Items</a></div>
</div>
</div>
</script>
更新:这类作品:
问题是当从一个产品返回到另一个产品时,产品不再列出
App.ProductsRoute = Ember.Route.extend({
model: function () {
return App.Products.find();
}
});
App.ProductRoute = Ember.Route.extend({
model: function (params) {
return App.Products.find(params.product_id);
},
renderTemplate: function () {
this.render('product', { // the template to render
into: 'application', // the template to render into
outlet: 'main', // the name of the outlet in that template
});
}
});
你可以这样修改你的路由器映射:
App.Router.map(function () {
this.route('products');
this.route('product', { path: 'product/:product_id' });
});
还可以考虑使用索引路由,在页面加载时将您转移到特定位置:
App.IndexRoute = Em.Route.extend({
redirect: function() {
this.transitionTo('products');
}
});
小提琴:http://jsfiddle.net/schawaska/d2FtF/
运行:http://jsfiddle.net/schawaska/d2FtF/show
相关文章:
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- FF视图源|脚本高亮显示为红色
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何在MVC3中显示鼠标悬停在文本上的部分视图
- 如何应用带过滤器的ng if来过滤记录,并在同一页面中显示两个不同的视图
- 为什么我的视图没有显示在角度ui视图中
- 使用PhoneGap和jQuery Mobile在android设备上显示动态列表视图
- 使用Ruby数组使用JS在视图中进行迭代和显示
- 滑动视图 - 显示下一项的预览/片段
- 在剃须刀应用程序中将视图显示为灯箱
- ember.js如何为视图显示不同的筛选列表?复杂的设置
- ng重复视图显示与JSON数据不对应
- RedirectToAction之后没有视图显示
- ASP.. NET MVC控制器/视图显示本地时间
- 离子弹出窗口视图显示在离子模态视图后面
- WinJs列表视图显示:无带ID的tile
- 完整的日历视图显示goToDate分前,下和今天
- 如何从父数组视图显示子对象视图
- CouchApp视图显示将为空结果
- 在树状视图显示中只打开一个li节点