Question

我希望使用list.html中的数据从视图控制器呈现一个表。下面是我的View.js文件：

function($, _, Backbone, SubAccountCollection){
    var AccountList = Backbone.View.extend({
        tagName: "div",
        el:'#sub-account-list', 
        initialize: function(){

        },
        render: function(id){
            console.log('inside the account list ' + id);
            var self = this;
            var accountList = new SubAccountCollection([],{ id: id });

            accountList.fetch({
                success: function(accnlist){
                    var template = _.template($('#listall').html({accnlist:accnlist.models}) 
                }
            );
        }

    });
    return AccountList;
});

sub-account-list是div容器或我的数据的占位符。 $('#listall')有<table>列出视图。以下是list.html：

<script type = "text/template" id ="listall">
<table>
    <tr><td>Name</td>
        <td>Users</td>
    </tr>
    <tbody>
        <% _.each(accountList, function(account) { %>
            <tr>
                <td><%= account.get('name') %></td>
                <td><%= account.get('users') %></td>
            </tr>
        <% }) %>
    </tbody>
      </table>
 </script>

所以现在显然它没有呈现任何东西，当我尝试调试时，它在$('#listall').html()上给出了一个未定义的。当我尝试访问_.template($('#listall').html(), {accnlist:accnlist.models})时，它会抛出“无法找到未定义的替换”，这意味着它无法找到$('#listall').html()。我如何访问该元素，以便它不会抛出此错误。我是否在从DOM中获取值时做错了。我已经坚持了一段时间，任何人都有任何想法？

EDIT :::::

var ProjectListView = Backbone.View.extend({
        template: _.template($("#listall").html()),
        initialize: function(options){
           this.id = options.id;
           this.collection = new ProjectsCollection();
           this.listenTo(this.collection, "sync", this.render);
           this.collection.fetch();
        },
        el: "#container",
       render: function(){

       var template = this.template({projectlists: this.collection.toJSON()});
        this.$el.html(template)
           }
     });
   var accountList = new AccountList({

  });
 return ProjectListView;
});

list.html

<table>
    <tr><td>Name</td>
        <td>Users</td>
    </tr>
    <tbody>
        <% _.each(accnlist, function(account,idx) { %>
             <tr>
                <td><%= account.name %></td>
                <td><%= account.users %></td>
            </tr>
        <% }) %>
    </tbody>
      </table>

上面是Ofer在我试过的小提琴中建议的代码，但我不知道为什么它会在$（'＃listall'）。html（）上说“undefined”。我完全错过了一些我无法弄清楚的小事。

Answer 1

你的第一个_.template函数，返回一个接受模型的函数，你可以通过调用它来避免这种情况_.template（＆＃34; template＆＃34;，{model object}）

        accountList.fetch({
            success: function(accnlist){
                var template = _.template($('#listall').html(), {accnlist:accnlist.toJSON()});
            }
        );
    }

BackboneJs-如何从骨干网中的视图控制器渲染html模板

1 个答案: