0

このタスクを行う正しい方法を知りたいのですが、A から Z までのアルファベットを含む JSON ファイルがあります。アプリ内でファイルをロードし、ロードしたデータを「alphabets」内の「alphabets」という配列に割り当てたいと思います。モデルを「dObj」と呼び、{{#each}} ループを使用して配列のすべての要素を表示します。

データをモデルにバインドする方法がわかりません。ArrayController の pushObject() メソッド内で create() メソッドを渡していますが、オブジェクトを作成するだけでなく、ロード データをモデル内の配列にプッシュする必要もあります。

皆様のご協力に感謝いたします。ありがとうございました。

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

コード：

    $function(){

        App = Ember.Application.create();

        App.dObj = Ember.Object.extend({
            alphabets: []
        });

        App.DObjController = Ember.ArrayController.create({
            content: [],
            loadAlphabets: function(){
                var self = this;
                $.getJSON('data/alphabets.json', function(data){
                    data.forEach(function(item){
                        self.pushObject(App.dObj.create(item));
                    });
                });
            }
        });
        App.initialize();
    });

JSONファイル

{
    'alphabets' : [
                    'A','B''C','D','E','F','G',
                    'H','I','J','K','L','M','N',
                    'O','P','Q','R','S','T','U',
                    'V','W','X','Y','Z'
                    ]
}

HTML

<script type="text/x-handlebars">
    {{#view Ember.Button target="App.DObjController" action="loadAlphabets"}}
       Load Alphabets
    {{/view}}

    {{#each App.DObjController}}
        {{alphabets}}                          
    {{/each}}
</script>
4

1 に答える 1

1

あなたがしたいことはdObj、ajax 呼び出しによって返された文字ごとに新しいものを作成し、それらのオブジェクトをDObjControllerArrayController にプッシュすることです。

次に、このオブジェクトの配列を表示するには、{{#each letterObj in App.DObjController}}テンプレート ヘルパー コマンドを使用してdObj、レター データを含む各インスタンスをループし、保存されているレター データを出力する必要があります。

JSFiddle の例

テンプレート：

<script type="text/x-handlebars">
    {{#view Ember.Button target="App.DObjController" action="loadAlphabets"}}
       Load Alphabets
    {{/view}}

    {{#each letterObj in App.DObjController}}
        {{letterObj.letter}}                          
    {{/each}}
</script>

JS:

$(function(){

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

    App.dObj = Ember.Object.extend({
    });

    App.DObjController = Ember.ArrayController.create({
        content: [],
        loadAlphabets: function(){
            var self = this;
            //$.getJSON('data/alphabets.json', function(data){
            //    data.forEach(function(item){
            //        self.pushObject(App.dObj.create(item));
            //    });
            //});

            setTimeout(function() {
                var alphabets = [
                    "A","B","C","D","E","F","G",
                    "H","I","J","K","L","M","N",
                    "O","P","Q","R","S","T","U",
                    "V","W","X","Y","Z"
                    ];
                alphabets.forEach(function(item){
                    self.pushObject(App.dObj.create({letter:item}));
                });
            },1000);
        }
    });
    App.initialize();
});​
于 2013-01-03T17:22:15.887 に答える