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!

score 27 · Accepted Answer · edited May 23 '17 at 10:28

27

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.

edited May 23 '17 at 10:28

Community

1
1

answered Jan 29 '13 at 14:58

Gajotres

57,309
16
102
130

but doesnt it get initialized automatically when inserting into the DOM ? – tellob Jan 29 '13 at 15:11
i tried to insert the initialization when init is called on my console view and when appending a new item to the list, refresh is called. – tellob Jan 29 '13 at 15:14
Sometimes you will need to initialize it yourself, specially in your case as you are creating listview from scratch. You dont need to initialize it in case you are appending list elements to an existing listview. – Gajotres Jan 29 '13 at 15:21
And when to initialize then? – tellob Jan 29 '13 at 15:27
Where were you originally calling :$('#myList').listview('refresh') ? Just replace it with $('#myList').listview().listview('refresh'); – Gajotres Jan 29 '13 at 15:35
I came around with $('#myPage').trigger('pagecreate');, calling after I rendered my ApplicationView and inserted the code into the body. Is that a possible one? – tellob Jan 29 '13 at 15:36
You can even try $('#myPage').trigger('pagecreate'); or $('#myPage').trigger('create'); (in case you only need to refresh a content) but do it only after you finish dynamic content generation. – Gajotres Jan 29 '13 at 15:39
ok the thing with pagecreate works so far, but theres another thing not working: i gave my ul a data-inset:true attribute. – tellob Jan 29 '13 at 15:45
Does it look like a basic lisview or is it maybe deformed because of this.$el.css('width', '50%');? – Gajotres Jan 29 '13 at 15:52
my ApplicationView is a div having the data-role=content attribute, but it isnt displayed, as i inserted the rendered application view... Using $('#myPage').html(applicationView.render().el); causes an error: HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy – tellob Jan 29 '13 at 15:56

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

1 Answers1