首先，我正在构建一个事件列表系统，我想使用相同的模板列出事件，无论它们出现在哪里，可以来自搜索，也可以作为显示“发生”等事情的页面上的小部件不久“事件等。
因此，在搜索中，模板会以这样的方式呈现
{{#each event in controller}}
{{render 'event-item' event}}
{{/each}}
这让我使用这个模板
<div class="event" {{action 'showModal' this}}>
{{#link-to 'details' this.id classNames="event__image" action="showModal" actionParam=this}}
<img src="{{unbound this.EventLogoURL}}" />
{{/link-to}}
{{console-log this}}
{{unbound AttractionName}}
<h4 class="event__title">
{{#link-to 'details' this.id action="showModal" actionParam=this}}
{{unbound this.EventName}}
{{/link-to}}
</h4>
<div class="event__info-links">
<span class="event__more-info">{{#link-to 'details' this.id action="showModal" actionParam=this}}More Info{{/link-to}}</span> <span class="event__separator">|</span> <span class="event__book-now">{{#link-to 'details' this.id action="showModal" actionParam=this}}Book Now{{/link-to}}</span>
</div>
<button {{action 'toggleWishlist' this bubbles=false}} {{bind-attr class="isInWishlist:icon-star2:icon-star :add-to-wishlist"}}>
{{#if isInWishlist}}
Remove from wishlist
{{else}}
Add to wishlist
{{/if}}
</button>
</div>
我有一个事件的项目控制器
import Ember from 'ember';
export default Ember.ObjectController.extend({
needs: ['event/wishlist'],
isInWishlist: function(){
return this.get('controllers.event/wishlist').isInList(this.get('model'));
}.property('controllers.event/wishlist.[]')
});
在搜索页面上，这一切都按预期工作，特别是isInWishlist工作，现在，当我想使用事件项模板作为窗口小部件时，我创建了一个事件建议控制器和视图，这在页面上呈现所以
{{render 'event-suggestions' events type='startingToday'}}
由于上下文不同，因此无法正确呈现，因此我必须创建另一个模板并将this更改为view.content以输出正确的详细信息，因此我在渲染时使用的模板这种方式是
<div class="event" {{action 'showModal' view.content}}>
{{#link-to 'details' view.content.id classNames="event__image" action="showModal" actionParam=view.content}}
<img src="{{unbound view.content.EventLogoURL}}" />
{{/link-to}}
{{unbound view.content.AttractionName}}
<h4 class="event__title">
{{#link-to 'details' view.content.id action="showModal" actionParam=view.content}}
{{unbound view.content.EventName}}
{{/link-to}}
</h4>
{{!-- From: £{{unbound view.content.PriceFrom}} --}}
<div class="event__info-links">
<span class="event__more-info">{{#link-to 'details' view.content.id action="showModal" actionParam=view.content}}More Info{{/link-to}}</span> <span class="event__separator">|</span> <span class="event__book-now">{{#link-to 'details' view.content.id action="showModal" actionParam=view.content}}Book Now{{/link-to}}</span>
</div>
<button {{action 'toggleWishlist' view.content bubbles=false}} {{bind-attr class="isInWishlist:icon-star2:icon-star :add-to-wishlist"}}>
{{#if isInWishlist}}
Remove from wishlist
{{else}}
Add to wishlist
{{/if}}
</button>
</div>
除了isInWishlist之外，这里的所有内容都有效（我可以将其切换进出愿望清单），但该功能永远不会在控制器中运行。
这是正在呈现的CollectionView
import Ember from 'ember';
export default Ember.CollectionView.extend({
classNames: ['slider'],
parameters: {
'DateFrom': moment().format('DD/MM/YYYY'),
'DateTo': moment().format('DD/MM/YYYY'),
'TimeFrom': '10:00',
'TimeTo': '19:00',
'Latitude': BoxofficeENV.APP.defaultLatitude, // this.get('latitude'),
'Longitude': BoxofficeENV.APP.defaultLongitude, // this.get('longitude'),
'SortOrderID': 1,
'SortDirection': 0,
'Pagesize': 18,
'Pageno': 1,
'DistinctAttractions': 1
},
content: null,
type: null,
contentBinding: 'controller',
itemViewClass: 'event-suggestion-item',
emptyView: Ember.View.extend({
templateName: 'loading'
}),
didInsertElement: function() {
console.log('suggestion area inserted');
},
setupParameters: function(){
var type = this.get('type'),
property = this.get('property'),
params = this.parameters
;
// this is needed so we can cancel the request if it is made again before it finishes
params.UID = type;
this.send('prepareParams', params, type);
this.get('controller').send('getEvents', params, type);
}.on('didInsertElement'),
updateOnLocationChange: function() {
var type = this.get('type'),
property = this.get('property'),
params = this.parameters
;
if (type === 'closeToYou') {
// this is needed so we can canel the request if it is made again before it finishes
params.UID = type;
if(
this.get('controller').get('location').latitude !== BoxofficeENV.APP.defaultLatitude &&
this.get('controller').get('location').longitude !== BoxofficeENV.APP.defaultLongitude
) {
params.Latitude = this.get('controller').get('location').latitude;
params.Longitude = this.get('controller').get('location').longitude;
this.get('controller').send('getEvents', params, type);
}
}
}.observes('controller.location'),
actions: {
prepareParams: function(params, type){
switch(type) {
case 'startingShortly':
var dateTimeFrom = moment();
var dateTimeTo = moment();
dateTimeTo.add(7, 'day');
params.TimeFrom = '00:00';
params.TimeTo = '23:59';
params.DateFrom = dateTimeFrom.format('DD/MM/YYYY');
params.DateTo = dateTimeTo.format('DD/MM/YYYY');
params.MaxDistanceMiles = 10;
params.SortOrderID = 5;
params.Latitude = BoxofficeENV.APP.defaultLatitude;
params.Longitude = BoxofficeENV.APP.defaultLongitude;
break;
case 'closeToYou':
params.TimeFrom = '00:00';
params.TimeTo = '23:59';
params.MaxDistanceMiles = 50;
if(
this.get('controller').get('location').latitude !== BoxofficeENV.APP.defaultLatitude &&
this.get('controller').get('location').longitude !== BoxofficeENV.APP.defaultLongitude
) {
params.Latitude = this.get('controller').get('location').latitude;
params.Longitude = this.get('controller').get('location').longitude;
}
break;
case 'startingToday':
params.TimeFrom = moment().format('HH:mm');
var dateTime = moment().add(7, 'day');
params.TimeTo = dateTime.format('HH:mm');
params.DateTo = dateTime.format('DD/MM/YYYY');
params.SortOrderID = 6;
params.MaxDistanceMiles = 50;
break;
}
}
}
});
这是阵列控制器
import Ember from 'ember';
export default Ember.ArrayController.extend({
needs: ['application', 'event/wishlist'],
itemController: 'event-item',
location: function() {
return this.get('controllers.application').get('location');
}.property('controllers.application.location'),
actions: {
getEvents: function(params, property){
var self = this;
if (typeof this.store.adapterFor('event').xhrs[property] !== 'undefined'){
this.store.adapterFor('event').xhrs[property].abort();
}
this.store.findQuery('event', params).then(function(data){
self.set('model', data);
Ember.run.scheduleOnce('afterRender', this, function(){
Ember.$('.'+property).find('.iosslider').iosSlider({
desktopClickDrag: true,
snapToChildren: true,
frictionCoefficient: 0.97
});
});
});
}
}
});
和事件项
的两个视图文件事件item.js
import Ember from 'ember';
export default Ember.View.extend({
tagName: 'li',
classNames: ['fadeInUp','animated','event-collection__event'],
templateName: 'views/event-item'
});
事件暗示-item.js
import Ember from 'ember';
export default Ember.View.extend({
tagName: 'div',
classNames: ['slide'],
templateName: 'views/event-suggestion-item'
});
如果我需要更具体，请告诉我。
我今天没有时间设置一个jsfiddle示例，但是如果有帮助我明天是否可以设置一个。
答案 0 :(得分：0)
我会将函数isInWishlist添加到itemViews，因为这是模板的上下文。从那里，你应该有权访问控制器，所以它只是一个传递函数来调用控制器上的isInWishlist。