jQuery mobile + backbone: cannot call methods on listview prior to initialization

Question

I'm trying to combine the advantages of Backbone.js and jQuery mobile. I'm developing for mobile devices and I'm currently trying to develop a dynamic list, for debug logging messages. Imagine you have a console window and you want to put entries inside. The thing is, after inserting a new <li>, the list has to be refreshed with $('#myList').listview('refresh'). This doesn't work for me and I get this error:

Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'

tagName : 'ul',
id : 'console',
consoleTemplate : _.template($('#console-template').html()),
initialize : function() {
  console.log('ConsoleView:init');
  this.$el.attr('data-inset', 'true');
  this.$el.attr('data-role', 'listview');
  this.$el.css('width', '50%');
  this.$el.append(this.consoleTemplate());
  // für alle Funktionen die mit this arbeiten
  _.bindAll(this, 'render', 'addConsoleItem', 'appendConsoleItem');
  this.consoleItemCollection = new ConsoleItemCollection();
  this.consoleItemCollection.bind('add', this.appendConsoleItem);
  this.counter = 0;
  this.render();
},
render : function() {
  console.log('ConsoleView:render');
  var self = this;
  _(this.consoleItemCollection.models).each(function(item) {
    self.addConsoleItem(item);
  }, this);
  return this;
},

This is an extract of my console view.

var view = Backbone.View.extend({
  el : 'div',
  id : 'content',
  consoleView : null,
  initialize : function() {
    console.log('ApplicationView:init');
    _.bindAll(this, 'render');
    this.$el.attr('data-role', 'content');
    _.bindAll(this, 'render');
    this.consoleView = new ConsoleView();
    this.consoleView.addConsoleItem(new ConsoleItemModel());
  },
  render : function() {
    console.log('ApplicationView:render');
    this.$el.append(this.consoleView.render().el);
    return this;
  }
});

This is my Application view.

So when to call the refresh method?

Thank you!

Answer 1

jQuery Mobile listview needs to be initialized before refresh can be triggered:

$('#myList').listview().listview('refresh');

If you want to find more about this and why is it important to be careful when working with a dynamically created content in jQuery Mobile take a look at my blog ARTICLE. Or you can find it HERE.