Question

我对骨干JS来说有点像菜鸟

我有一个代码，我需要根据json列出类别并在页面上列出它们。现在，当用户点击任何类别列表时，将从服务器获取附加到该类别的新JSON并在页面上列出。

我的问题是我列出了类别，但不知道如何获取新的JSON并通过根据所选类别动态创建新JSON的视图和集合来在屏幕上显示它。

这是我的HTML代码

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Category list</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>


  <div class="container">
    <h1>Category list</h1>
    <hr />
    <div class='categoryList'></div>
    <div class='selected_category'></div>
  </div>

   <script type="text/template" id="events-template">

            <% _.each( CategoryCollection, function(Category){ %>
              <div class='category'>
              <h2 class='<%= Category.get("category") %>'  > 
                    <%= Category.get("category") %>
                </h2> 
              </div>
            <% }); %> 
    </script>

    <script type="text/template" id="selectedCategory-template">
            <% _.each( SelectedCategoryCollection, function(selected_category){ %>
              <div class='category_list'>
                <%= selected_category.get("category") %>
              </div>
            <% }); %> 
    </script>



  </body>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

  <script>
    var categoryJSON;

    var Category = Backbone.Model.extend();

    var CategoryCollection = Backbone.Collection.extend({
      model: Category,
      url: 'categories.json',
      parse: function (response) {
        categoryJSON = response;
        console.log(categoryJSON)
        return response;
      }
    });

    var CategoryAbout = Backbone.View.extend ({
      el: '.categoryList',
      render: function () {
        var that = this;
        // console.log(that)
        var eventCategory = new CategoryCollection();
        // console.log(eventCategory);
        eventCategory.fetch({
          success: function (CategoryCollection) {
            // console.log(CategoryCollection)
            var template = _.template($('#events-template').html(), {CategoryCollection: CategoryCollection.models});
            // console.log(template)
            that.$el.html(template);
          }
        })
      },
      events: {
        "click .category h2" : "doSearch"  
      },
      doSearch: function(event){
           // Button clicked
          console.log('clicked');
          console.log(event.toElement.className)
          router.navigate('/category/'+event.toElement.className, { trigger: true });
           // window.location.href = window.location.href + '/#/category/all';
      }

    });  

    var CategoryAbout = new CategoryAbout ();

    var Router = Backbone.Router.extend({
      routes: {
        '': 'home',
         "category/:categoryName": "getCategory",
      }     
    });

    var router = new Router();
    // console.log(router)
    router.on('route:home', function () {
      // console.log(this)
      console.log('home');
      CategoryAbout.render();
    });

    router.on('route:getCategory', function (categoryName) {

        console.log( "Category Name " + categoryName );
        var urlToFetch;
        for (var i = 0; i < categoryJSON.length; i++) {
            if(categoryJSON[i].category == categoryName)
            {
              urlToFetch = categoryJSON[i].data;
            }
        };
        console.log(urlToFetch);         
    });

    Backbone.history.start();


  </script>

和类别的

的JSON文件

 

    [

        {
            "category": "all",
            "data": "all.json"
        },
        {
            "category": "music",
            "data": "music.json"
        },
        {
            "category": "business",
            "data": "business.json"
        },
        {
            "category": "sports",
            "data": "sports.json"
        },
        {
            "category": "workshops",
            "data": "workshops.json"
        }

    ]

并说我们选择了研讨会类别，然后研讨会的JSON就是这样


    {
        "request": {
            "venue": "0",
            "ids": "0",
            "type": "json",
            "city": "NY",
            "edate": 0,
            "page": 0,
            "keywords": "0",
            "sdate": 0,
            "category": "workshops",
            "city_display": "NY",
            "rows": 50
        },
        "count": 10,
        "item": [
            {
                "event_id": "230801950442480",
                "eventname": "Holiday special YES! course :) :)",
                "thumb_url": "http://graph.facebook.com/230801950442480/picture",
                "thumb_url_large": "http://graph.facebook.com/230801950442480/picture?type=large",
                "start_time": 1395943200,
                "start_time_display": "Thu Mar 27 2014 at 06:00 pm",
                "end_time": 1396213200,
                "end_time_display": "Sun Mar 30 2014 at 09:00 pm",
                "location": "NY,ABC street",
                "venue": {
                    "street": "",
                    "city": "NY",
                    "state": "XYZ",
                    "country": "PQR"
                },
                "label": "Tomorrow",
                "featured": 0
            },
            {
                "event_id": "230801950442480",
                "eventname": "Holiday special YES! course :) :)",
                "thumb_url": "http://graph.facebook.com/230801950442480/picture",
                "thumb_url_large": "http://graph.facebook.com/230801950442480/picture?type=large",
                "start_time": 1395943200,
                "start_time_display": "Thu Mar 27 2014 at 06:00 pm",
                "end_time": 1396213200,
                "end_time_display": "Sun Mar 30 2014 at 09:00 pm",
                "location": "NY,ABC street",
                "venue": {
                    "street": "",
                    "city": "NY",
                    "state": "XYZ",
                    "country": "PQR"
                },
                "label": "Tomorrow",
                "featured": 0
            }
        ]
    }

提前感谢。

如果我遗漏了任何数据，请告诉我

Backbone JS创建动态视图和集合

0 个答案: