0

配列要素を作成し、アウトレットにリスト形式を設定したいと思います。何がベストプラクティスになるのか知りたいです。私は非常に単純なアプリを持っています。「ColorModel」内でカラー配列を宣言しました。「home」(data-template-name) 内の「homeContent」というラベルの付いたアウトレットに、この配列のすべての色を動的に入力/バインドしたいと思います。コンテンツを動的にバインドする場所と方法がわかりません。コンテンツを「App.ColorController」にバインドする必要がありますか? 私はオンライン検索を行っていくつかのフィドルを手に入れましたが、それらのアプローチは簡単ではありませんでした。皆様のご協力に感謝いたします。ありがとう。

これがフィドルです：http://jsfiddle.net/exciter/sqJEh/

アプリ コード:

$(function(){

    App = Ember.Application.create({
        ready: function(){
            alert("APP INIT");
        }
    });

    //APP 
    App.ApplicationController = Ember.Controller.extend();
    App.ApplicationView = Ember.View.extend({
        templateName: "application",
        classNames: ['']
    });

    //NAVBAR
    App.HomeController = Ember.Controller.extend();
    App.HomeView = Ember.View.extend({
        templateName: "home",
        classNames: ['']
    });

    //MODELS

    //COLORS
    App.ColorModel = Ember.Object.create({
        //COLOR ARRAY
        var colorArr: Ember.A(["Orange","Blue","Green","Yellow","White","Grey","Purple","Silver","Black","Maroon","Sunburst"]);
    });

    App.ColorController = Ember.Controller.extend();
    App.ColorView = Ember.View.extend({
        templateName: '',
        classNames: ''
    }); 


    App.Router = Ember.Router.extend({
        enableLogging: true,
        location: 'hash',

        root: Ember.Route.extend({
            //EVENTS
            gotoHome: Ember.Route.transitionTo('home');

            home: Ember.Route.extend({
                router: '/',
                connectOutlets: function(router, context){
                    router.get('applicationController').connectOutlet('home');
                }
            }),
        })
    });
    App.initialize();
});

HTML コード:

<script type="text/x-handlebars" data-template-name="application">

</script>

<script type="text/x-handlebars" data-template-name="home">
    {{outlet homeContent}}
</script>

質問は次のとおりです。

あなたのフィドルには、カラー配列があります：

var colors = ["Orange","Blue","Green",
               "Yellow","White","Grey",
               "Purple","Silver","Black",
               "Maroon","Sunburst"]

私はこの方法で配列を宣言しています：

var color: Ember.A(["Orange","Blue","Green",
               "Yellow","White","Grey",
               "Purple","Silver","Black",
               "Maroon","Sunburst"])

質問 1: Ember が説くベスト プラクティスはどれですか?

あなたのフィドルのHTMLで

<script type="text/x-handlebars" data-template-name="home">
   {{#each color in controller}}
     {{color}}           
   {{/each}}
</script>

「色」がどこから来ているかは理解していますが、{{#コントローラーの各色}} はどこにありますか?

質問 2: その「色」はどこから来るのですか? for-inループですか？

質問 3: ビュー間のすべての相互作用がコントローラーを介して行われることを理解するために、HTML 内のこれらの色のそれぞれに「クリック イベント」をバインドする関数を宣言する必要がある場合、そのようなすべての関数を内部で宣言する必要があります。そのコントローラー？

質問 4: リスト アイテムの HTML 表現に関して、動的に生成する必要がある場合、リスト アイテムはどこで宣言されますか?

これらの質問であなたを攻撃して申し訳ありません。私はドキュメントと無限のスレッドを調べましたが、そのような情報はどこでもほとんど議論されていません. 誰もが自分のチョップをデモしたいと思っていますが、表面を傷つけることはほとんどありません. 公式ドキュメントでさえ、そのような詳細を欠いています。皆様のご協力に感謝いたします。

4

1 に答える 1

1

http://trek.github.com/から始める必要があると思います。ほとんどの質問に答えます。あなたの例では、アプリケーション ビューでアウトレットを接続する場合、{{outlet]] はアプリケーション テンプレートにある必要があります。

を呼び出すとapplicationController.connectOutlet('home')、Ember.js は次のことを行います。

  • applicationアプリケーションに関連するビューのテンプレート (ここではテンプレート)で {{outlet}} を検索します
  • HomeController という名前のコントローラーを検索し、HomeView という名前のビューを作成してそれらを接続します。

次の例を参照してください。ここでは、homeController の connectOutlet メソッドにコンテンツを追加しています。

http://jsfiddle.net/sqJEh/19/

更新質問への回答：

  • 1 : デフォルトでは、Ember.js が配列プロトタイプを拡張することで配列をラップするため、Ember.A() 関数で配列をラップする必要はありません。Ember []Array も同様です。

  • 2 : ええ、{{#each}} ヘルパーは一種の forEach ループhttp://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_eachを提供します。コントローラーは ArrayController です (基本的には配列をプロキシします)。この例では、コントローラーはhomeControllerインスタンスであり、connectOutlet 中に色が取り込まれます。そのため、実行するとき{{#each color in controller}}は、コントローラーを介して色の配列をループしているだけです。

  • 3 : ユーザー インタラクションを処理する方法はいくつかあると思うので、ここで回答するのは少し難しいです。それはあなたが何をしたいかによります。

    • ビューの問題 (たとえば、jquery による css や dom 操作など) のみを処理する場合は、({{#each}} ヘルパーの itemViewClass を使用して) 各色の子ビューを作成し、onClickイベント ハンドラーを定義します。
    • データを操作する必要がある場合は、{{action}} ヘルパーを使用できます。ルーター ベースのアプリでは、アクションのターゲットは、ルーターの現在の状態で定義されたハンドラーになります。ここで、他のコントローラー/モデルを検索して、必要なことを行うことができます。
    • 両方を混在させたい場合onClickは、ビューでハンドラーを定義し、router.send('yourAction') を使用してアクションをルーターにリダイレクトします。

  • 4 : の意味がわからないdynamically generatedので、残念ながらここでヒントを与えることはできません :(。

于 2012-12-26T09:45:36.283 に答える