簡體   English   中英

要在模板上獲取骨干JSON集合

[英]Backbone JSON collection to be fetched on template

我只是在寫一個簡單的骨干程序。 但是我不確定將JSON數據推送到下划線模板時我在做什么錯。 任何幫助表示贊賞。

我的代碼如下所示:

    <!doctype html>
    <html>
       <head>
          <title>Backbone tutorial</title>
       </head>
       <body>
          <div class="user">user</div>
          <div class="page"></div>

          <script type="text/template" id="user-list-template">
            <h1> <%= data.key %> </h1>

          </script>

          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript" src="underscore.js"></script>
          <script type="text/javascript" src="backbone.js"></script>
          <script>

這是我的收藏代碼

              var Album = Backbone.Collection.extend({

                url : "/data.json"
              });

這是我的查看代碼

             var UserList= Backbone.View.extend({
                el:'.page',
                template:_.template($('#user-list-template').html()),
                render : function(){
                    var that=this;
                    var album= new Album();
                    album.fetch({
                        success:function(album){

                            var _data = {data : album.models} ;

                            $(that.el).html(that.template(_data));
                        }
                    })


                }

             });

這是我的路由器代碼

             var Router = Backbone.Router.extend({
                routes: {
                    "":                 "home"   // #help
                }


             });



             var userList= new UserList();
             var router = new Router();

             router.on('route:home', function(){
                userList.render();
             });

             Backbone.history.start();
          </script>
       </body>
    </html>

這是data.json文件

{ "key" : "value to print on template "}

這里有很多問題。 首先,集合應由模型組成,您可以在創建集合時由模型指定這些模型。 其次,成功回調返回接收到的數據,而不是集合。 第三,在渲染調用中執行AJAX是個壞主意。

您應該做什么,理想情況下是:

  1. 實例化模型或集合
  2. 提供給視圖
  3. 監聽模型/集合上的事件,例如(this.listenTo(this.collection,'sync',this.render)
  4. 獲取集合。 在您的示例中,可以在路由器中完成提取。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM