4

Foundation Zurb の Revealを Ember アプリにうまく実装しようとしましたが、うまくいきませんでした。pre.4 リリースでもう一度試してみたところ、非常に簡単であることがわかりましたが、正しいパターンに従っているかどうかはまだ疑問です。もしそうなら、この例があなたのプロジェクトに役立つことを願っています。

使用:

  • ember-1.0.0-pre.4.js

実際の例は、このjsfiddleにあります。

Postオブジェクトのリストがあります。リスト項目をクリックすると、モーダル ダイアログが開き、投稿に関する詳細情報が表示されます。

リストを表示するために、Ember アプリを作成し、Postモデルのリソースを用意します。

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>

ObjectControllerが必要で、 revealテンプレートを作成するため、(オンザフライで生成された Ember によって) RevealControllerをオーバーライドします。

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

RevealControllerのコンテンツはPostモデルのインスタンスであるため、そのプロパティをテンプレートに入れることができます。

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

投稿のタイトルをクリックすると、RevealController のコンテンツを投稿のインスタンスに設定したいと考えています。このために、 postsテンプレートopenModalからイベントを呼び出し、現在のPostをそのコンテキストとして渡します。

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

ターゲットのバブリングにより、 ApplicationRouteでopenModalイベントを定義し、RevealControllerのコンテンツを渡されたPostに設定して、最終的にダイアログを表示できます。

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

私の現在の ember の知識では、これは正しい方法のように感じますが、改善点があるかどうかを聞いて興奮しています.

4

1 に答える 1

1

あなたのアプローチには何の問題もありません。はneeds、別のコントローラーに依存するコントローラーに関するものであり、あなたがしているように見えるのは、単に の を設定しているだけcontentですEmber.ArrayController。Ember pre 5 で @deprecated になったことに対応するには、実装を少し変更する必要がありますが、次の方法でこれを実現this.controllerForできます。

  • PostsController（そして私は他の人を想定しています）がRevealControllerusing needs;を必要とすることを指定します。
  • RevealControllerのインスタンスをopenModalイベント ( )に渡します{{action openModal this controllers.reveal}}。

もちろん、ほぼ同じことを達成する他の方法もあります。ただし、私が考える利点は次のとおりです。

欠点の 1 つは、RevealControllerReveal を呼び出すことができる少数のコントローラーを渡す必要があることです。needs: ['reveal']ただし、 a lotを指定していることに気付いた場合は、連結されたプロパティであるArrayControllerため、 s が拡張する抽象コントローラーをいつでも作成できるため、これを欠点とは特に考えていません( Emberを参照)。needsconcatenatedPropertiesEmber.ControllerMixin

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

これについてどう思いますか？

また、あなたが実際に使用している唯一の非 Ember コードは、次のとおり$('#myModal').reveal();です。didInsertElementReveal コードを のに配置する方法はありませんApp.RevealViewか? そして、そこで次のようなことを行うことができます:this.get('element').reveal();または同様の (おそらくサブビュー?)。

于 2013-02-09T20:32:42.273 に答える