Question

我试图在Ember应用程序中很好地实现Foundation Zurb's Reveal，但我没有成功。现在有了pre.4版本，我再次尝试，结果很简单，但我仍然想知道我是否遵循了正确的模式。如果是这样，我希望这个例子可以帮助您完成项目。

使用：

余烬-1.0.0-pre.4.js

可在此jsfiddle中找到一个工作示例。

我有一个发布对象列表。单击列表项将打开模式对话框并显示有关帖子的详细信息。

要显示列表，我创建了一个Ember应用，并为我的发布模型提供了资源：

window.App = Em.Application.create();

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

App.Post.FIXTURES = [{
    id: 1,
    title: 'Lorem',
    description: 'Lorem ipsum dolor sit amet'
}, {
    id: 2,
    title: 'Ipsum',
    description: 'Fusce ante nulla'
}];

App.Store = DS.Store.extend({
    revision: 11,
    adapter: DS.FixtureAdapter.create()
});

App.Router.map(function () {
    this.resource('posts', {
        path: '/'
    });
});

App.PostsRoute = Em.Route.extend({
    model: function () {
        return App.Post.find();
    }
});

对于模态对话框，我在应用程序模板中添加了render 'reveal'。

<script type="text/x-handlebars">
    {{outlet}}
    {{render "reveal"}}
</script>

我覆盖了（通过生成的Ember） RevealController ，因为我需要一个 ObjectController ，我创建了一个揭示模板

App.RevealController = Em.ObjectController.extend();

由于我的 RevealController 的内容是发布模型的一个实例，我可以将其属性放在模板中：

<script type="text/x-handlebars" data-template-name="reveal">
    <div id="myModal" class="reveal-modal large">
    <h2>{{title}}</h2>
    <p>{{description}}</p>
    <a class="close-reveal-modal">&#215;</a>
    </div>
</script>

当我点击Post的标题时，我想设置RevealController的内容Post的实例。为此，我从帖子模板中调用openModal事件，并将当前的帖子作为其上下文传递：

<script type="text/x-handlebars" data-template-name="posts">
  <ul>
    {{#each controller}}
        <li>
            <a {{action openModal this}} href='#'>{{title}}</a>
        </li>
    {{/each}}
    </ul>
    {{outlet}}
</script>

由于target bubbling我可以在 ApplicationRoute 中定义 openModal 事件，我可以将 RevealController 的内容设置为传递发布并最终显示对话框：

App.ApplicationRoute = Em.Route.extend({
    events: {
        openModal: function (content) {
            this.controllerFor('reveal').set('content', content);
            $('#myModal').reveal();
        }
    }
});

根据我目前对余烬的了解，感觉这是正确的做法，但我很高兴听到是否有任何改进。

Answer 1

我认为你的做法绝对没有错。 needs更多地是关于依赖于另一个控制器的控制器，而您似乎正在做的只是设置content的{{1}}。您需要稍微更改您的实施，以适应Ember pre 5中的Ember.ArrayController @deprecated ，但您可以通过以下方式实现此目的：

指定this.controllerFor（我假设其他人）要求PostsController使用RevealController;
将needs的实例传递到您的RevealController事件（openModal）。

当然还有其他方法可以实现大致相同的事情。但是，我看到的优点如下：

You're using dependency injection，非常适合测试等...;
您的{{action openModal this controllers.reveal}}没有责任找到控制器;

有一个缺点是你要在少数能够调用Reveal的控制器中传递App.ApplicationRoute。我并不特别认为这是一个缺点，因为如果你发现自己指定了RevealController一个批次，那么你总是可以创建一个抽象的控制器needs: ['reveal'] s extend，因为ArrayController是一个连接属性（请参阅Ember的needs中的concatenatedProperties）：

Ember.ControllerMixin

您对此有何看法？

另外，我真正使用的唯一非Ember代码是：App.AbstractController = Ember.ArrayController.extend({ needs: ['reveal'] }); App.PostsController = App.AbstractController.extend({ // Since needs is a concatenated property, PostsController will have // access to 4 controllers: reveal, another, andAnother, andYetAnother. needs: ['another', 'andAnother', 'andYetAnother'] });。有没有办法将Reveal代码放入$('#myModal').reveal();的{{1}}？然后在那里，您可以执行以下操作：didInsertElement或类似的（可能是子视图？）。

这是使用Reveal和Ember.js的正确方法吗？

1 个答案: