Javascript 类绑定在emberjs中不起作用，因为未检查属性

首先，我正在构建一个事件列表系统，我想使用相同的模板来列出出现在任何地方的事件，这些事件可以来自搜索，也可以作为页面上的小部件来显示事件等

因此，在搜索时，模板被呈现为这样

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

在搜索页面上，这一切都按预期工作，特别是isInWishlist工作，现在，当我想使用事件项模板作为小部件时，我已经创建了一个事件建议控制器和视图，它呈现在如下页面上

{{render 'event-suggestions' events type='startingToday'}}

由于上下文不同，因此无法正确渲染，因此我必须制作另一个模板并将其更改为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: &pound;{{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>

这是阵列控制器

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
                    });
                });
            });
        }
    }
});

以及事件项的两个视图文件

event-item.js

import Ember from 'ember';

export default Ember.View.extend({
    tagName: 'li',

    classNames: ['fadeInUp','animated','event-collection__event'],

    templateName: 'views/event-item'

});

event-suggestion-item.js

import Ember from 'ember';

export default Ember.View.extend({
    tagName: 'div',

    classNames: ['slide'],

    templateName: 'views/event-suggestion-item'
});

如果我需要更具体一些，请告诉我

---

我今天没有时间设置JSFIDLE示例，但如果明天有帮助，我会看看是否可以设置一个。

我会将函数isInWishlist添加到您的ItemView中，因为这是模板的上下文。从那里，您应该可以访问控制器，这样它就可以作为一个传递函数来调用控制器上的isInWishlist。

我强烈建议您使用组件，而不是ItemController、CollectionView和render helper。组件是独立的，设计用于在不同的环境中工作。我会的，但是客户端没有预算让我现在回去重构大部分应用程序。该应用程序最初是在所有东西都不是主流建议的时候编写的，至少在我当时读到的内容中不是这样。将来当我们升级到更新版本的ember时，我可能有机会回去重构所有这些东西，但现在没有。

import Ember from 'ember';

export default Ember.View.extend({
    tagName: 'li',

    classNames: ['fadeInUp','animated','event-collection__event'],

    templateName: 'views/event-item'

});

import Ember from 'ember';

export default Ember.View.extend({
    tagName: 'div',

    classNames: ['slide'],

    templateName: 'views/event-suggestion-item'
});