無法從JSON文件輸出 - 主幹

試圖在單擊div時獲取JSON數據，但無法看到輸出。我使用Backbone Collection來提取json數據。試圖輸出json數據到控制檯，也在另一個div。下面列出了json文件的內容。無法從JSON文件輸出 - 主幹

<div class = "test">Click </div> 
<div class = "new_test"> </div>

var myModel = Backbone.Model.extend(); 

var myCollection = Backbone.Collection.extend({ 

    model: myModel, 
    url : "myjson.json" 

}) 

var jobs = new myCollection(); 

var myView = Backbone.View.extend({ 

    el : 'div', 
    events : { 

    'click div.test' : 'render' 
    }, 
    initialize : function(){ 

    jobs.fetch(); 

    }, 
    render : function(){ 

    jobs.each(function(myModel){ 

     var _comp = myModel.get('company'); 

     $('div.new_test').html(_comp); 

     console.log(_comp) 
    }) 

    } 
})

JSON文件：

[ 
{ 
    "company": "Ford", 
    "Type": "Automobile" 
}, 
{ 
    "company": "Nike", 
    "Type": "Sports" 
} 
]

來源

2013-06-18 user1336103

跨瀏覽器思考，我不確定JSON與集合（這裏是一個數組）作爲根元素是好的。理論上講，JSON應該有一個對象作爲根元素。你有沒有對這個JSON的控制，你可以嘗試在集合上面添加一個根對象嗎？ – Ricola3D

@ Ricola3D http://www.json.org/「JSON建立在兩個結構上」 – Prinzhorn

當您單擊測試時，它是否獲取數據？如果是，數據是否被返回？檢查您的控制檯是否存在跨域問題。你也應該重置集合，因爲你可能在數據返回之前點擊div。 – TYRONEMICHAEL

您必須調用視圖的渲染函數才能看到結果。您不能實例化集合對象並期望看到結果。

代碼尚未經過測試。

var myView = Backbone.View.extend({ 


el : 'div', 
events : { 

    'click div.test' : 'render' 
     }, 
initialize : function(){ 

    jobs.fetch(); 
    this.render(); 

}, 
render : function(){ 

    jobs.each(function(myModel){ 

    var _comp = myModel.get('company'); 

    $('div.new_test').html(_comp); 

    console.log(_comp) 
    }) 

} 
}) 

var yourView = new myView();

來源

2013-06-18 10:38:36 Harish

'fetch'是異步的，他也不會看到任何東西。用'jobs.fetch（{success：this.render}）替換它;'（或這樣）。 – Loamhoof

我有同樣的問題在幾個星期前。

檢查JSON的路徑。例如，當你有目錄的結構是這樣的：

-js 
    - collection 
     collection.js 
    - json 
     myjson.json

骨幹收集你這樣設置：

 url: 'js/json/event.json',

檢查在Firefox，Chrome瀏覽器，我們有一個跨瀏覽器的思維和檢查本：

  jobs.fetch({ 
       reset: true, 
       success: function (model, attributes) { 
        //check here if json is loaded 
       } 
      });

來源

2013-06-18 09:48:37 Agata

無法從JSON文件輸出 - 主幹

回答

相關問題