jQuery mobile +主干：无法在初始化之前调用listview上的方法

Posted 2023-05-09

【中文标题】jQuery mobile +主干：无法在初始化之前调用listview上的方法

【英文标题】：jQuery mobile + backbone: cannot call methods on listview prior to initialization

【发布时间】：2013-01-13 04:38:06

【问题描述】：

我正在尝试结合 Backbone.js 和 jQuery mobile 的优点。我正在为移动设备开发，目前正在尝试开发一个动态列表，用于调试日志消息。想象一下，你有一个控制台窗口，你想在里面放条目。问题是，在插入新的<li> 后，列表必须用$('#myList').listview('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;
,

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

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

这是我的应用程序视图。

那么什么时候调用刷新方法呢？

谢谢！

【参考方案1】：

jQuery Mobile 需要先初始化列表视图，然后才能触发刷新：

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

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

【讨论】：

但是插入 DOM 时不会自动初始化吗？

我尝试在我的控制台视图上调用 init 时插入初始化，并且在将新项目附加到列表时调用刷新。

有时您需要自己初始化它，特别是在您从头开始创建列表视图时。如果您将列表元素附加到现有列表视图，则不需要初始化它。

那什么时候初始化呢？

你最初在哪里调用 :$('#myList').listview('refresh') ？只需将其替换为 $('#myList').listview().listview('refresh');