个人中心
gpt4 book ai didi

javascript - Backbonejs 集合未填充，但 fetch 有效

转载 作者：行者123 更新时间：2023-12-03 11:08:26 24 4
gpt4 key购买 nike

这是我一直在做的事情: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 的调用正在运行并返回项目。但当时 View 开始出现，我怀疑通话尚未完全完成。

从 .fetch 成功回调中调用 View 是一种不好的做法吗？这样做我是否会失去主干的整个模块化优势？或者我是否缺少一些东西来将返回的对象放入集合中？

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

感谢您的宝贵时间!

最佳答案

我在这里看到了很多好东西。您正在接受 Backbone 事件驱动模型(例如，通过在 sync 上进行渲染)，并且您已经有了一个良好的开端。

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

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

你想搬家

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

直到实例化 View 之后。所以，你会这样做:

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

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

关于javascript - Backbonejs 集合未填充，但 fetch 有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27722019/

24 4 0
文章推荐： javascript - 来自另一个文件的变量
文章推荐： javascript - 在联系表单中传递当前页面 URL 和标题
文章推荐： javascript - Debug模式下 Chrome 控制台中的编程步骤
文章推荐： javascript - Android (5.0.1) Chrome 正在删除 javascript 空格和注释，有办法阻止吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com