javascript - Ember JS - 无法在每个 Action 中更改 div 模式的类

Question

我在尝试做一些本应简单的事情时遇到了一些重大问题，这意味着我显然错过了一些简单的事情。

我通过 API 提取文章，而不是让某人单击文章的链接，我希望在单击时弹出一个包含文章内容的模式，这样就不需要页面更改或必须多次加载 api。当然，我想到解决这个问题的最简单方法是使用一个操作将属性从 false 设置为 true，并在 bind-attr 类上使用该属性来显示模式。但是，无论我做什么，我都无法获取操作中最初设置或更改的属性值，并且记录变量以检查并查看它返回的内容会导致错误，指出变量未定义。我真的很想看看这里的问题是什么，所以我也可以在我的列表/网格类切换函数上使用这个解决方案，因为现在我由于遇到类似的问题而求助于使用 jQuery。

下面是用于我的文章列表和操作处理的代码。该操作确实触发了，我用alert()确认了这一点，但属性(property)上没有运气。感谢您的帮助!

HTML

    <script type="text/x-handlebars" data-template-name="articles">
        <button {{action 'listStyle'}}>List</button>
        <button {{action 'gridStyle'}}>Grid</button>
        <section id="articles-category" class="grid">
            <div class="row">
                {{#each}}
                    <div class="col-xs-6 col-md-3 article-wrapper" {{action "openArticle"}}>
                        <div class="article">
                            <img src="http://placehold.it/300x270">
                            <div class="content">
                                <h3>{{title}}</h3>                                   
                            </div>
                        </div>
                    </div>
                    <div {{bind-attr class=":article-modal isArticleActive:enabled" target="controller"}}>
                        <div class="article-close">X</div>
                        <div class="article-back">Back to Articles</div>
                        <div class="article-wrapper">
                            <div class="container">
                                <h2 class="article">{{title}}</h2>
                                {{{unescape html_body}}}
                            </div>
                        </div>
                    </div>
                {{/each}}
            </div>
        </section>
    </script>

app.js

    // MAIN APP CONFIGURATION
    App = Ember.Application.create();

    DS.RESTAdapter.reopen({
        host: 'http://mihair.herokuapp.com',
        namespace: 'api'
    });

    Ember.Handlebars.helper('unescape', function(value) {
        newValue = value.replace(/(?:\r\n|\r|\n)/g, '<br />');
        return new Ember.Handlebars.SafeString(value);
    });


    // ROUTER
    App.Router.map(function(){
        this.resource('articles', {path: ':id'});
        this.resource('article', {path: 'articles/:id_or_slug'});
    });

    App.ArticlesRoute = Ember.Route.extend({
        model: function() {
            return this.store.find('articles');
        }
    });

    App.ArticleRoute = Ember.Route.extend({
        model: function(params) {
            return this.store.find('articles', params.id_or_slug)
        }
    });


    // MODELS
    App.Response = DS.Model.extend({
        success: DS.attr('boolean', {defaultValue: false}),
        message: DS.attr('string')
    });

    App.Articles = DS.Model.extend({
        title: DS.attr('string'),
        description: DS.attr('string'),
        html_body: DS.attr('string')
    });

    App.Article = DS.Model.extend({
        id: DS.attr('number'),
        title: DS.attr('string'),
        description: DS.attr('string'),
        html_body: DS.attr('string')
    });


    // CONTROLLERS
    App.ArticlesController = Ember.ArrayController.extend({
        isArticleActive: false,
        actions: {
            listStyle: function() {
                $('#articles-category').removeClass('grid').addClass('list');
            },
            gridStyle: function(){
                $('#articles-category').removeClass('list').addClass('grid');
            },
            openArticle: function() {
                this.set('isArticleActive', true);
            }
        }
    });

Answer 1

isArticleActive 存在于 ArticlesController (即集合)上，但是当您使用 {{#each}} 时，您会更改上下文从 Controller 到单个元素。您需要使用 itemController 来为每个项目的单独模型而不是整个集合创建属性。

Ember.js Controller Does not work