CODEWITHSUNDEEP
javascriptjquerybackbone.jsmarionette
Uuid
Uuid

Reputation: 2546

Marionette "Uncaught TypeError: Object [object Object] has no method 'render'", with ItemView

In Bakbone Marionette I'm trying to display an IteView with data from the model. The JSON data from the rest api comes fine. The problem is that whenever I try to display a view inside a region it displays the mentioned error.

This is the code:

TestDataModel = Backbone.Model.extend({

    url: function(){
        return '/test.php?api=getTestData
    }
});

TestDataView = Backbone.Marionette.ItemView.extend({

    template: Handlebars.compile($('#testing-template').html()),

    initialize: function(){
        _.bindAll(this);

        // I want to bind render when the model changes        
        this.model.on('change', this.render, this);        

        this.model.fetch();
    }

});


<script id='testing-template' type='text/x-handlebars-template'>
    Testing template: {{test_token1}} {{test_token2}}
</script>

// this the main function that render the data on a main base page region.
onRender: function(){

    var testModel = new TestDataModel.Model();
    var testView = new TestDataView({
         model:testModel
    });
    this.test_region.show(testView);
}

Upvotes: 2

Views: 2994

Answers (3)

Robert Levy
Robert Levy

Reputation: 29073

Use onShow instead of onRender. The region hasn't been setup yet when onRender is called

Upvotes: 2

Scott Puleo
Scott Puleo

Reputation: 3684

Don't call fetch from your views initializer.

TestDataModel = Backbone.Model.extend({

    url: function(){
        return '/test.php?api=getTestData
    }
});

TestDataView = Backbone.Marionette.ItemView.extend({

    template: Handlebars.compile($('#testing-template').html()),

    initialize: function(){
        _.bindAll(this); 
        this.model.on('change', this.render, this);        
    }

});


<script id='testing-template' type='text/x-handlebars-template'>
    Testing template: {{test_token1}} {{test_token2}}
</script>

// this the main function that render the data on a main base page region.
onRender: function(){
    var self = this;
    var testModel = new TestDataModel.Model();
    var testView = new TestDataView({
         model:testModel
    });
    this.testModel.fetch().done(function(){
      self.test_region.show(testView);
    });
}

Upvotes: 1

kinakuta
kinakuta

Reputation: 9037

Instead of binding on the model, try the listenTo convention:

TestDataView = Backbone.Marionette.ItemView.extend({

    template: Handlebars.compile($('#testing-template').html()),

    initialize: function () {

        this.listenTo(this.model, 'change', this.render);

        this.model.fetch();
    }
});

Like I stated above, if this still isn't working, you're either missing something or you'll need to provide your own render.

Upvotes: 1

Related Questions