CODEWITHSUNDEEP
backbone.js
Rana
Rana

Reputation: 55

pass data from model to view in backbone.js

i want to pass data from model to view and i want to get this data length in view and make for loop on it but the property of length get undefined and i can't pass data to view there is an error in template 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>

and the error in html say 

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)

Upvotes: 1

Views: 1185

Answers (1)

mikeapr4
mikeapr4

Reputation: 2856

Based on the error, looks like you don't have the view within the scope of the success function. This should work:

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

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

Although you should probably think about adding a render function to the view, and possibly having the view listen to model changes in order to trigger it.

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();
}

Upvotes: 2

Related Questions