代码之家 › 专栏 › 技术社区 › Nobody

未捕获引用错误:主干中的html文件中未定义模型。js应用程序

backbone.js-collections underscore.js-templating backbone.js

-1

Nobody · 技术社区 · 7 年前

演示。js公司

var CommentsCollection = Backbone.Collection.extend({

    url : "http://0.0.0.0:8080/"

});

var CommentsListView = Backbone.View.extend({

    el: '.page',

    render : function(){
        var that = this;
        var commentsCollection = new CommentsCollection();
        commentsCollection.fetch({
            success: () => {
                    var models = commentsCollection.models;
                    // _.each(models, function(models){
                    //  console.log(models.get('firstname'));
                    // });

                  var template = _.template($('#reddit-comments-template').html());
                  that.$el.html(template(models));
            }
        })
    }
});


var PageRouter = Backbone.Router.extend({
    routes: {
        '' : 'home'
    }
});

Backbone.history.start();

指数html

<html>
<head>
    <title> </title>
</head>
<body>
    <div class="container">
        <h1>Top posts</h1>
        <hr />
        <div class="page"></div>
    </div>

    <script type="text/template" id="reddit-comments-template">
        <table class = "comments table">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>Commments</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <% _.each(models, function(models){ %>
                    <tr>
                        <td><%= models.get('firstname') %></td>
                        <td><%= models.get('lastname') %></td>
                        <td><%= models.get('id') %></td>
                    </tr>
                    <% }); %>
                </tr>
            </tbody>
        </table>
    </script>

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="underscore-min.js"></script>
    <script type="text/javascript" src="backbone-min.js"></script>
    <script type="text/javascript" src="demo.js"></script>

</body>
</html>

实际上,如果你看到了,我试着从api获取一些数据,并根据数据中的变化更新视图,集合从api获取数据,然后我让集合的模型在模型中循环数据,模型中的变量被打印在我添加到js脚本中的日志中,如您所见,但我猜值没有传递到html文件,从而导致了该错误。你能告诉我怎么改正吗。

2 回复 | 直到 7 年前

1

2

waranlogesh 7 年前

您可以将集合转换为json并将其传递给模板并访问模型。通过这种方式,您可以使用_3;遍历模型。并在模板中渲染其属性。

var CommentsListView = Backbone.View.extend({

    el: '.page',

    render : function(){
        var context = {};
        this.commentsCollection = new CommentsCollection();
        this.commentsCollection.fetch({
            success: () => {
                    //var models = commentsCollection.models;
                    // _.each(models, function(models){
                    //  console.log(models.get('firstname'));
                    // });
                  context['models'] = this.commentsCollection.toJSON()
                  var template = _.template($('#reddit-comments-template').html());
                  that.$el.html(template(context));
            }
        })
    }
});

模板:

<html>
<head>
    <title> </title>
</head>
<body>
    <div class="container">
        <h1>Top posts</h1>
        <hr />
        <div class="page"></div>
    </div>

    <script type="text/template" id="reddit-comments-template">
        <table class = "comments table">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>Commments</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <% _.each(models, function(model){ %>
                    <tr>
                        <td><%= model.firstname %>
                        <td><%= model.lastname %></td>
                        <td><%= model.id %></td>
                    </tr>
                    <% }); %>
                </tr>
            </tbody>
        </table>
    </script>

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="underscore-min.js"></script>
    <script type="text/javascript" src="backbone-min.js"></script>
    <script type="text/javascript" src="demo.js"></script>

</body>
</html>

2

1

Emile Bergeron Rudy Hinojosa 7 年前

在将集合或模型发送到模板之前,首先使用 toJSON() 在主干模型和集合上都可用的方法。当我们使用 toJSON 在集合上,它返回一个包含每个模型的属性哈希的数组。

var CommentsListView = Backbone.View.extend({
    el: '.page',
    // read and compile the template once
    template: _.template($('#reddit-comments-template').html()),

    render: function() {
        var commentsCollection = new CommentsCollection();
        commentsCollection.fetch({
            context: this, // avoids "that = this;"
            success: function(collection, response, options) {
                that.$el.html(this.template({ models: collection.toJSON() }));
            }
        });
    }
});

PS:我在成功回调中添加了默认参数。