CODEWITHSUNDEEP
javascriptjsonbackbone.jsunderscore.js
Trifit
Trifit

Reputation: 122

Backbone not getting my JSON

Give up, no idea why Backbone is not fetching my json. My inspector says: "Uncaught ReferenceError: Business is not defined" Anyone can help me?

Here is my code:

  //-------------  
  // Model:
  //-------------

  var DirectoryItem = Backbone.Model.extend();    


  //-------------
  // Collection:
  //-------------

  var Directory = Backbone.Collection.extend({    
    model: DirectoryItem,
    url: 'JSON/directory.json',

    parse: function (data) {
      return data.Businesses
    }

  });

  //-------------
  // List View:
  //-------------

  var DirectoryListView = Backbone.View.extend({

    el: $("#directoryView"),

    events: {
        "click li": "itemClicked"
    },   

    initialize: function() {
      this.collection = new Directory(); 

      this.collection.fetch();
      this.render();                
      this.bind('change', this.render, this);
    },

    render: function () {
      var business = new Directory();

      var that = this;

      business.fetch({
        success: function (Directory) {
          var template = _.template($('#item-list-template').html(), {Directory: Directory.models});
          that.$el.append(template);
        }
      });
      that.$el.toggleClass('view');

      return that;
    },

    itemClicked: function(e){
      //we get the id of the clicked item throught his data property from the html 
      var id = $(e.currentTarget).data('id');
      //we obtain the right model from the connection with the id
      var name = this.collection.get(id);
      //we load the view of the selected model
      var directoryItemView = new DirectoryItemView({ model: name });   
    }

  });

Here is my template:

<script type="text/template" id="item-list-template">
  <li><%= Business %></li>
</script>

And here is an example of my JSON:

{

  "Businesses":[
    {
      "Business" : "Busines nº1",
      "Field" : "Marketing - web dev agency",
      "Contact Info" : "[email protected]",
      "Link" : "http://www.web.com/contact-us",
      "Where?" : "Downtown",
      "Round:" : 0,
      "follow up" : "",
      "Comments" : ""
    },
    {
      "Business" : "Busines nº2",
      "Field" : "University",
      "Contact Info" : "",
      "Link" : "https://www.web.edu",
      "Where?" : "",
      "Round:" : 0,
      "follow up" : "",
      "Comments" : ""
    },...

Thanks a lot!

Upvotes: 0

Views: 78

Answers (1)

T J
T J

Reputation: 43156

The data ({Directory: Directory.models}) you're passing to underscore doesn't have a Business property, hence the error.

What you're passing is an array of models, you should iterate over it and access Business from each model

 <% _.each(Directory, function(model) { %>
     < li > <%= model.get("Business") %> < /li>
 <% }); %>

Upvotes: 2

Related Questions