1

Ember.js で、あるアレイ コントローラのコンテンツを別のアレイ コントローラのコンテンツにリンクする際に問題が発生しています。Stackoverflow を精査しましたが、解決策がないようです。

シナリオは単純です。「キャンペーン」というモデルがあります。モデルはかなり基本的で、次のように見えます...

キャンペーン モデル:

App.Campaign = DS.Model.extend({

    name: DS.attr('string'),
    description: DS.attr('string'),
    opts: DS.attr('string'),
    starred: DS.attr('boolean'),
    keywords: DS.hasMany('App.Keyword')

});

// Create dummy campaign array

App.Campaign.FIXTURES = new Array();

// Populate dummy campaign array

...

キャンペーン コントローラーも基本的なものです。内部で何も行われていない単純な ArrayController です...

キャンペーン インデックス コントローラー:

App.CampaignsIndexController = Em.ArrayController.extend({

});

この質問のために、アプリケーション テンプレートを必要なものだけに落とし込みました。以下に示すように、アプリケーション テンプレートにはサイドバーがあります。サイドバーには 2 つのビューがあります。1 つのビューはサイトのナビゲーション用で、もう 1 つのビューは「スター付きキャンペーン」用です。このビューには、キャンペーンのコレクション全体のサブセットが含まれます。

アプリケーション テンプレート:

<!-- ================================================== -->
<!-- ======================= APP ====================== -->
<!-- ================================================== -->

<div id="app" class="">

    <!-- ================================================== -->
    <!-- ==================== SIDEBAR ===================== -->
    <!-- ================================================== -->

    <div id="sidebar">

        {{ view App.NavigationView }}

        {{ view App.StarredCampaignsView controller="App.StarredCampaignsController" }}

    </div>

    <!-- ================================================== -->
    <!-- ====================== PAGE ====================== -->
    <!-- ================================================== -->

    <div id="page" class="">

        {{ outlet page }}

    </div>

</div>

スター付きキャンペーンのコントローラーがあります。これは、物事が混乱し始めるところです。このコントローラーでは、ArrayController のコンテンツを、すべての Campaign モデルの配列を保持する CampaignsIndexController のコンテンツにバインドします。

スター付きキャンペーン コントローラー:

App.StarredCampaignsController = Em.ArrayController.extend({

    content: [],

    contentBinding: Ember.Binding.oneWay('App.CampaignsIndexController.content')

});

スター付きキャンペーンのビューも非常にシンプルです...

スター付きキャンペーン ビュー:

App.StarredCampaignsView = Em.View.extend({

    templateName: 'templates/layout/starred-campaigns',

});

スター付きキャンペーンのテンプレートは次のようになります。controller.content 内のアイテムをループして別のビューに渡そうとしています。

スター付きキャンペーン テンプレート:

<h5 class="sidebar-title">Starred Campaigns</h5>

<ul class="starred-campaigns clearfix">

    {{# each item in controller.content }}

        {{ view App.StarredCampaignItemView itemBinding="item" }}

    {{/ each }}

</ul>

ただし、これらすべてにもかかわらず、App.CampaignsIndexController によって表される App.Campaign 配列に値を入力しても、StarredCampaignsController のコンテンツは空のままです。私たちのアプローチに何か問題がありますか？ここでは本当に単純なものが欠けているように感じます。

4

1 に答える 1

1

Ember では、コントローラーが他のコントローラーを要求するには、needsプロパティを使用する必要があります。これは Ember では常に変化しています。以前のバージョンでは、ルーターの責任でした。this.controllerForさらに古いバージョンでは、このアプローチは、あなたが取ろうとしているように見えるアプローチに似ていました。ただし、最終的なアプローチは廃止されて久しく、コントローラー/モデル/ビューのインスタンスはApp直接保持されなくなり、オブジェクト表現のみが保持されます。

s に直接飛び込むには、コントローラーに次のようなものが必要であることneedを伝える必要があります。App.StarredCampaignsControllerApp.CampaignsIndexController

App.StarredCampaignsController = Em.ArrayController.extend({
    content: [],
    needs: ['campaigns_index']
});

App.CampaignsIndexControllerスター付きキャンペーン ビューのコントローラにアクセスできるようになりました: {{controllers.campaigns_index}}。

シンプルな JSFiddle を参照してください: http://jsfiddle.net/AGJfB/

あなたが機能していない理由は、コントローラーのインスタンスではなく、コントローラーのオブジェクトを参照しているためです。

Ember.Binding.oneWay('App.CampaignsIndexController.content')

App.CampaignsIndexControlleronがありますが、Appそれはそのオブジェクトです。Ember は、Ember の方法 ( this.controllerFor、needs、URL 経由での移動など) のいずれかでアクセスすると、インスタンスを作成します。

過ぎ去った日々には、次のものを使用できました。

Ember.Binding.oneWay('App.campaignsIndexController.content')

ただし、コントローラーへの絶対パスを参照しているため、これは非常に悪い方法です。Ember pre 1 以来、私は を使用する必要はありませんでしたEmber.Binding.oneWayが、それでも必要な場合があります。ただし、それを使用していることに気付いた場合は、それが必要かどうか、より良い方法がないかどうかを自問するのがおそらく賢明です。

うまく説明できたと思います。ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-02-13T02:08:45.433 に答える