从模型传递数据以在骨干.js中查看

Question

我想将数据从模型传递到视图，我想在视图中获取此数据长度并对其进行for循环，但是长度的属性未定义，并且我无法传递数据来查看模板html中有错误

 <html>
<head>
    <link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="container">Loading...</div>
    <div class="list">
        <button id="list">LIST</button>
    </div>



      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
    <script type="text/template" id="view_list">


    </script>
    <script type="text/javascript">

    var app = {};
        app.postModel = Backbone.Model.extend({
            url: 'https://jsonplaceholder.typicode.com/comments',
            defaults: {
                postId: 0,
                id: 0,
                email:"",
                body:""
            }
        });

        app.viewlist = Backbone.View.extend({
            el:$(".list"),
            initialize:function(){
                this.model = new app.postModel();
            },
            template: _.template($('#view_list').html()),
            events:{
                "click #list"  : "list"
            },

            list:function(e)
            {
                this.model.fetch({
                    success: function (post) {

                        console.log(post.toJSON().length);
                        this.$el.html(this.template(post.toJSON()));
                    }
                });
            }


        });

        app.viewpost = new app.viewlist();


    </script>


</body>

和HTML中的错误说

Uncaught TypeError: Cannot read property 'html' of undefined
    at success (backbone:49)
    at Object.a.success (backbone-min.js:12)
    at o (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at w (jquery.min.js:4)
    at XMLHttpRequest.d (jquery.min.js:4)

Answer 1

根据错误，您似乎没有成功功能范围内的视图。 这应该工作：

            var view = this;
            this.model.fetch({
                success: function (post) {

                    console.log(post.toJSON().length);
                    view.$el.html(view.template(post.toJSON()));
                }
            });

尽管您可能应该考虑向视图添加render功能，并可能让视图侦听模型更改以触发它。

initialize: function() {
    this.model = new app.postModel();
    this.model.on('sync', this.render, this); // Backbone 0.9.2 way

    // Backbone 0.9.9+ way
    // this.listenTo(this.model, 'sync', this.render);
}

render: function() {
    this.$el.html(this.template(this.model.toJSON()));
},

...

list: function(e) {
    this.model.fetch();
}