jQuery mobile + backbone:在初始化之前无法在listview上调用方法

时间:2013-01-29 14:56:09

标签: jquery css3 listview jquery-mobile backbone.js

我正在尝试结合Backbone.js和jQuery mobile的优点。我正在为移动设备开发,我正在尝试开发一个动态列表,用于调试日志消息。想象一下,你有一个控制台窗口,你想把条目放在里面。问题是,在插入新的<li>后,必须使用$('#myList').listview('refresh')刷新列表。这对我不起作用,我收到了这个错误:

  

错误:无法在初始化之前调用listview上的方法;试图调用方法'刷新'

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;
},

这是我的控制台视图的摘录。

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

这是我的应用程序视图。

那么何时调用refresh方法?

谢谢!

1 个答案:

答案 0 :(得分:27)

jQuery Mobile 需要初始化listview才能触发刷新:

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

如果您想了解更多相关信息,为什么在jQuery Mobile中使用动态创建的内容时要小心,请查看我的博客 ARTICLE 。或者你可以找到 HERE