Question

这是我一直在做的事情：http://jsfiddle.net/leapin_leprechaun/29aysou5/3/

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
      <title>Results App Training</title>


      <script src="js/libs/jquery.js"></script>
      <script src="js/libs/underscore.js"></script>
      <script src="js/libs/backbone.js"></script>



        <script type="text/javascript">
    $( document ).ready(function() {


    /*
      ***********
      Models
      ***********
    */
    var MatchInfo = Backbone.Model.extend({
    defaults: {
      season:"1415"
    }
    });//model class

    var matchInfo = new MatchInfo(); //model instance


    /*
      ***********
      Collections
      ***********
    */

    var Matches = Backbone.Collection.extend({
      model: MatchInfo, //note this references the model class, not the model instance
      url : "http://www.hookhockey.com/index.php/temp-gillian/",
      sync : function(method, collection, options) {
        // By setting the dataType to "jsonp", jQuery creates a function
        // and adds it as a callback parameter to the request, e.g.:
        // [url]&callback=jQuery19104472605645155031_1373700330157&q=bananarama
        // If you want another name for the callback, also specify the
        // jsonpCallback option.
        // After this function is called (by the JSONP response), the script tag
        // is removed and the parse method is called, just as it would be
        // when AJAX was used.
        //console.log('sync');
        options.dataType = "jsonp";
        return Backbone.sync(method, collection, options);
      },
      parse : function(response) {
       // console.log(response.matches);
       //.matches is what the json at http://www.hookhockey.com/index.php/temp-gillian/ is putting out 
        return response.matches;

      }



    }); //collection class
    var matches = new Matches(); //collection instance

    matches.bind("sync", matches.render, matches);

    matches.fetch({
            success : function(collection, response, options) {


             /* notes: calling these outside of the success listener meant that nothing got returned. This is because they fire before the fetch returns http://stackoverflow.com/questions/9431673/load-data-into-a-backbone-collection-from-json-file
             the alternative is to call them within the success function or to call them like so:
             .complete(function() {
                  console.log(matches);
                  console.log('length: ' + matches.length);
              });

             ..after the fetch call.

             */

              console.log('in collection instance fetch success: ' + matches.length);


             return response;

            },
            error : function(collection, response, options) {
              console.log(response.statusText);
            },
            // A timeout is the only way to get an error event for JSONP calls!
            timeout : 5000
        });



    /*
      ***********
      Views
      ***********
    */

    var MatchModelView = Backbone.View.extend({
     // template: _.template( $("#matchTemplate").html() ), // removed because template was not being found - uses underscore and the content from index.html script tag with the id of matchElement that contains the template tags
      id : 'someID',
      className: 'someClassName',
      initialize: function () {
            _.bindAll(this, "render");
             this.collection.bind("reset", this.render);
             },
      render: function() {
        //var matchTemplate = this.template(this.model.toJSON()); //passes in all of the model data (using this.model.toJSON()) into the template (this.template) so that info is available to the template tags
        var matchTemplate = '<p>' + this.model.get('title') + '</p>';
        this.$el.html(matchTemplate); //pass the templated info into the el element and return it for render
        return this;
      }



    }); //model view class
    //var matchModelView = new MatchModelView({model:matchInfo}); //model view instance
    //console.log(matchModelView.render().el);


    var MatchesModelView = Backbone.View.extend({
    id: 'somethingelse',
     initialize: function () {
            _.bindAll(this, "render");
             this.collection.bind("reset", this.render);
             },
    render: function(){

     console.log('collection length in view:' + this.collection.length); //returns 0
        this.collection.each(this.oneMatch, this); 

        return this;

    },
    oneMatch: function (aMatch){
      console.log(aMatch);
        var matchView = new MatchModelView ({ model: aMatch });
        this.$el.append(MatchView.render().el);
    }


    }); //collection view class


    var matchesModelView = new MatchesModelView({collection: matches });

     $("#allMatches").html(matchesModelView.render().el);











    /*
      ***********
      Routers
      ***********
    */





    }); //end doc ready
        </script>

    </head>

    <body>

      <div class="site">



        <div id="allMatches">adasdasd</div>

        <div id="copy"></div>

      </div> 



      <script id="matchTemplate" type="text/template">
         <%= title %>
        </script>
    </body>
    </html>

我刚刚在那里放了2个警报，以显示我认为我的问题所在。我可以看到对json的调用正在工作并返回项目。但是当视图开始时，我怀疑电话没有完全通过。

从.fetch成功回调中调用视图是不好的做法吗？这样做会失去骨干的整体模块化优势吗？或者我错过了什么来将返回的对象放入集合中？

我是Backbone的新手，所以你可以忽略我在代码中的所有评论，只是想跟踪！ :)我意识到他们也应该被分成不同的js文件，我只是先处理好事情。

谢谢你的时间！

Answer 1

我在这里看到很多好东西。您正在接受Backbone事件驱动模型（例如，通过在sync上呈现）并且您已经开始了。

您的问题是，您正在sync回调中的集合上调用渲染，而不是视图。

matches.bind("sync", matches.render, matches);

你想移动

matches.bind("sync", matches.render, matches);
matches.fetch({ ... });

直到您实例化视图之后。所以，你会这样做：

var matchesModelView = new MatchesModelView({collection: matches });
matches.bind("sync", matchesModelView.render, matches);
matches.fetch({ ... });

并注意我将 matches.render 替换为 matchesModelView.render 作为sync事件的回调。

Backbonejs集合未填充，但fetch工作

1 个答案: