Javascript 如何将主干集合中的数据提取到模板_Javascript_Backbone.js_Underscore.js_Underscore.js Templating

Javascript 如何将主干集合中的数据提取到模板

javascript backbone.js

Javascript 如何将主干集合中的数据提取到模板,javascript,backbone.js,underscore.js,underscore.js-templating,Javascript,Backbone.js,Underscore.js,Underscore.js Templating,我只是在写一个简单的主干程序。但我不知道如何将数据从主干集合提取到主干模板。完整的代码写在下面： <!doctype html> <html> <head> <title>Backbone tutorial</title> </head> <body> <

我只是在写一个简单的主干程序。但我不知道如何将数据从主干集合提取到主干模板。完整的代码写在下面：

        <!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">

这是我的视图代码

                 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>

服务器需要为collection.fetch（）请求返回模型对象的JSON数组。因此data.json应该如下所示：

[{"key":"value to print on template"},{"key":"another value"}]

并尝试此集合视图渲染实现：

型号：

var User = new Backbone.Model.extend({});

var Album = new Backbone.Collection.extend({
  model: User,
  url: "/data.json"
});
//create collection instance
var album = new Album();

var UserList= Backbone.View.extend({
    el:'.page',
    template:_.template($('#user-list-template').html()),
    initialize: function(){
      //register a collection data add event handler
      this.listenTo(album,"add",this.addUser);
      //register a collection data remove event handler
      this.listenTo(album,"remove",this.removeUser);
      album.fetch();
    },
    render : function(){

    },
    addUser: function(user){  //apply model data to view template and append to view element
      this.$el.append(this.template(user.toJSON()));
    },
    removeUser: function(user){
      //view state update implementation when data have been removed from collection
    }
 });

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

收藏：

var User = new Backbone.Model.extend({});

var Album = new Backbone.Collection.extend({
  model: User,
  url: "/data.json"
});
//create collection instance
var album = new Album();

var UserList= Backbone.View.extend({
    el:'.page',
    template:_.template($('#user-list-template').html()),
    initialize: function(){
      //register a collection data add event handler
      this.listenTo(album,"add",this.addUser);
      //register a collection data remove event handler
      this.listenTo(album,"remove",this.removeUser);
      album.fetch();
    },
    render : function(){

    },
    addUser: function(user){  //apply model data to view template and append to view element
      this.$el.append(this.template(user.toJSON()));
    },
    removeUser: function(user){
      //view state update implementation when data have been removed from collection
    }
 });

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

查看：

var User = new Backbone.Model.extend({});

var Album = new Backbone.Collection.extend({
  model: User,
  url: "/data.json"
});
//create collection instance
var album = new Album();

var UserList= Backbone.View.extend({
    el:'.page',
    template:_.template($('#user-list-template').html()),
    initialize: function(){
      //register a collection data add event handler
      this.listenTo(album,"add",this.addUser);
      //register a collection data remove event handler
      this.listenTo(album,"remove",this.removeUser);
      album.fetch();
    },
    render : function(){

    },
    addUser: function(user){  //apply model data to view template and append to view element
      this.$el.append(this.template(user.toJSON()));
    },
    removeUser: function(user){
      //view state update implementation when data have been removed from collection
    }
 });

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

模板：

var User = new Backbone.Model.extend({});

var Album = new Backbone.Collection.extend({
  model: User,
  url: "/data.json"
});
//create collection instance
var album = new Album();

var UserList= Backbone.View.extend({
    el:'.page',
    template:_.template($('#user-list-template').html()),
    initialize: function(){
      //register a collection data add event handler
      this.listenTo(album,"add",this.addUser);
      //register a collection data remove event handler
      this.listenTo(album,"remove",this.removeUser);
      album.fetch();
    },
    render : function(){

    },
    addUser: function(user){  //apply model data to view template and append to view element
      this.$el.append(this.template(user.toJSON()));
    },
    removeUser: function(user){
      //view state update implementation when data have been removed from collection
    }
 });

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

div.user视图将根据采集数据操作动态添加/删除用户列表视图

希望这有帮助。

我建议做两个修改

1.首先检查模板中的数据字段。因为您正在从集合中获取数据，所以它将是一个模型数组

或者可以使用for循环在集合上迭代

2.data.json文件应该如下所示

[{"key" : "value"}]

我已经看完了你建议的代码。但我无法理解您传递给以下函数的“user”：addUser:function（user）{this.$el.append（this.template（user.toJSON（））；}，请解释如何以及在何处定义userAlbum collection是一组有序的用户模型。当一个新模型被添加到集合中时，它将触发一个“添加”事件，并将添加的模型传递给事件处理程序。然后你可以用这个模型更新视图。嗨，尼坦什，我已经按照你的建议做了，我已经调试过，发现它不工作，但它工作，这不应该是这样的。请您提供更多帮助。对不起，这个模板。您必须使用

数据[0]。获取（'key'）

。