2011-12-31 6 views
4

私はモバイルフレームワークLungoJSで作業を始めました。私とJavaScriptはかなりうまく動作しませが、本当に私はこの元のコードを変更したい:

ORIGINAL.JS

var mock = function() { 
     var mock = []; 
     for (var i=1; i<=5; i++){ 
      mock.push({ 
       id: i, 
       name: 'name n'+i, 
       description: 'description n'+i 
      }) 
     } 
     lng.View.Template.List.create({ 
      container_id: 'lives', 
      template_id: 'show_music_template', 
      data: mock  
     }) 
    } 
    return { 
     mock: mock 
    } 



})(LUNGO, App); 

この元のコードは正常に動作し、それは簡単です、今私は$のに.getを使用して要求を行いたいです誰がJSONファイルを返し、ORIGINAL.JSのような配列を埋める:

JSON結果:

{"result":[ 
    {"id":"52","username":"jgali","image":"Prova_(live)387.jpeg","name":"Prova (live)","type":"music","language":"Catalan","category":"8","tags":"indie, dine prova, indie live","description":"Aquesta es una prova online de reidiou","licence":"Reidiou License","played":"54","record_time":"45","facebook_id":"1052266203_2342869925158","twitter_hash":"#Provalive","create_date":"2011-11-01 13:04:21"}, 
    {"id":"52","username":"jgali","image":"Prova_(live)387.jpeg","name":"Prova (live)","type":"music","language":"Catalan","category":"8","tags":"indie, dine prova, indie live","description":"Aquesta es una prova online de reidiou","licence":"Reidiou License","played":"54","record_time":"45","facebook_id":"1052266203_2342869925158","twitter_hash":"#Provalive","create_date":"2011-11-01 13:04:21"} 
]} 

SERVICE.JS

var mock = function() { 
     var mock = []; 
     var url = 'http://localhost/app/rest/podcasts'; 
     var data = {}; 

     //lng.Service.get = $get 
     lng.Service.get(url, data,function(response) { 
      var array = []; 
      //Do something with response 
      jQuery.each(response.result, function() { 
        mock.push({ 
         id: this.id, 
         name: this.name, 
         description: this.description 
        })  
      }); 
      document.write(mock[1].id); 
     }); 
     lng.View.Template.List.create({ 
      container_id: 'lives', 
      template_id: 'show_music_template', 
      data: mock 
     }) 
    } 
    return { 
     mock: mock 
    } 

問題は、私が "偽" アレイを使用することができない外部ループです。確かに私はいくつか間違いを犯します...しかし、誰が問題を知っていますか?

ありがとうございました。

+0

は[]モック 'のような=' var'を削除; 'グローバル配列を宣言すると、あなたがグローバルを使用し –

+2

罰金になりますと、アンチパターンであります避けるべきである。 –

答えて

0

$.get()は実行に時間がかかるため、非同期です。このような非同期呼び出しには、callback関数を使用する必要があります。 mock配列にアクセスするには、このコールバック内に何かをネストする必要があります。

また、AJAX呼び出しを強制的にjQueryで同期させることもできます(ただし、私とドキュメントはこれに対して警告します)。 the docsによると:

デフォルトでは、すべての要求が(すなわち、これはデフォルトで trueに設定されている)非同期に送信されます。同期要求が必要な場合は、このオプションを falseに設定します。クロスドメインリクエストとデータタイプ: "jsonp"リクエストは同期操作をサポートしていません。 同期要求は、ブラウザ を一時的にロックし、要求が の間に動作を無効にすることがあります。

+0

"モック配列にアクセスするには、このコールバック内に何かをネストする必要があります。"どうすれば入手できますか? \t 回答ありがとう – galix85

+0

@ galix85ネストとコールバック関数は何ですか?もしそうでなければ、JSでの基本的な読書をお勧めします。 –

0

ありがとう!!私はあなたが言ったようにコールバックを使用して問題を解決しました。

誰もが興味を持っている場合、私は、コードをポスト:

App.Services = (function(lng, app, undefined) { 

var mock = function() { 
     var mock = new Array(); 
     var url = 'http://localhost/app/rest/podcasts'; 
     var data = {}; 

     function getData (url,data,mock,callbackFnk){ 
      lng.Service.get(url, data,function(response) { 
       //Do something with response 
       // now we are calling our own callback function 
       if(typeof callbackFnk == 'function'){ 
        callbackFnk.call(this, response); 
       }else{ 
        document.write("Error"); 
       } 

      }); 
     } 
     getData(url,data,mock,function(response){ 

      jQuery.each(response.result, function() { 
        mock.push({ 
         id: this.id, 
         name: this.name, 
         description: this.description 
        }) 

      }); 

      lng.View.Template.List.create({ 
      container_id: 'lives', 
      template_id: 'show_music_template', 
      data: mock 
      }) 
     })  
    } 

    return { 
     mock: mock 
    } 

})(LUNGO, App);