加載JSON數據並將其綁定到模型中的數組，然後顯示數組元素？

我想知道做這個任務的正確方法，我有一個從A到Z字母表的JSON文件。我想在我的應用程序中加載文件，並將加載的數據分配給一個名爲「字母」的數組，在名爲「dObj」的模型中，然後使用{{#each}}循環顯示數組的所有元素。加載JSON數據並將其綁定到模型中的數組，然後顯示數組元素？

我不確定如何將數據綁定到模型。在ArrayController的pushObject（）方法中，我傳遞了create（）方法，而我不僅要創建對象，還要將加載數據推送到模型中的數組。

我感謝你的幫助。謝謝。

這裏是小提琴：http://jsfiddle.net/exciter/Y3dcs/

CODE：

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

來源

2013-01-03 Combustion007

-1張貼有大量的語法錯誤小提琴。討論一個涉及$ .getJSON的小提琴是無用的，因爲沒有人有服務器運行提供你的json例子。 – mavilein

http://jsfiddle.net/Y3dcs/2/ 我修正了此版本中的語法錯誤。 – mavilein

不要被冒犯。下調問題被認爲是標記被嚴重研究的問題。即使你的警報沒有被調用。實際上，你確實暗中要求有人用那個傻瓜寫你的代碼。 – mavilein

你想要做的是創建一個新的dObj對於您的ajax調用返回的每個字母，然後將這些對象推入DObjController ArrayController。

然後，要顯示這個對象數組，您需要使用{{#each letterObj in App.DObjController}}模板幫助程序命令遍歷包含您的字母數據的每個dObj實例並輸出存儲的字母數據。

JSFiddle example

模板：

<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-03 17:22:15 CraigTeegarden

非常感謝你的C4P，我非常感謝你的幫助，這真是太棒了。 – Combustion007

加載JSON數據並將其綁定到模型中的數組，然後顯示數組元素？

回答

相關問題