Question

我有一些重大问题试图做一些应该简单的事情，这意味着我显然错过了一些简单的事情。

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

以下是我的文章列表和操作处理所使用的代码。该动作确实触发，我通过警报（）确认，但没有运气。谢谢你的帮助！

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}}时，您将上下文从控制器更改为单个文章。您将要使用itemController来为每个项目单独模型而不是整个集合创建属性。

Ember.js Controller Does not work

Ember JS - 无法在每个中更改动作来改变div模态的类

1 个答案: