无法从JSON文件输出-主干

Unable to output from JSON file - Backbone

本文关键字：输出 主干 文件 JSON      更新时间：2023-09-26

尝试在单击div时获取JSON数据，但无法看到输出。我使用Backbone Collection来拉json数据。试图输出json数据到控制台，也在另一个div中。json文件的内容也列在下面。

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

JS 

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"
 }
]

您必须调用视图的呈现函数来查看结果。您不能实例化一个集合对象并期望看到结果。

代码未经过测试 

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();

几周前我也遇到过同样的问题。

检查JSON的路径。例如，当你有这样的目录结构:

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

主干集合你这样设置:

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

检查火狐，在Chrome我们有一个跨浏览器的思维检查这个:

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