如何在动态呈现的列表中创建切换按钮答案

【问题标题】：How to create toggle buttons within a dynamically rendered list如何在动态呈现的列表中创建切换按钮
【发布时间】：2009-09-04 17:59:24
【问题描述】：

对于我的掌上应用程序，我有一个动态生成的列表（从 SQLite 中提取数据，加载到模型中，绑定）。这工作正常，但现在我需要为每个动态生成的项目添加一个开/关切换。在模板中包含切换开关有效，但我无法正确分配小部件功能。我正在尝试在场景中绑定小部件，但到目前为止还没有运气。

那么有人知道如何在动态列表中绑定小部件的任何 webOS 教程（或有示例）吗？

【问题讨论】：

标签： webos palm-pre

【解决方案1】：

它并不优雅，但一种方法是使用列表助手的 onItemRendered 属性。

分配的函数传递给列表小部件、项目模型和项目节点。在这个处理程序中，您可以在项目节点中找到您的切换小部件，并附加您的功能。

类似这样的：

onItemRendered: function(listWidget, itemModel, itemNode){
    var item = itemNode.select('div.mywidget').first();
    Mojo.Event.listen(item, Mojo.Event.tap, this.handleTap.bind(this));
}.bind(this)

在内置应用程序的源代码中有一些如何使用 onItemRendered 的示例。例如，Tasks 应用程序这样做是为了取消删除“特殊”项目的能力。

【讨论】：

【解决方案2】：

从 Palm Dev 自己那里得到了答案：

如果您使用切换按钮的 .value 属性来设置它的状态，则根本不需要在切换按钮上调用 setupWidget。相反，将 .value 属性绑定到每个列表项模型。步骤如下：

1.在 list-item.html 模板中：

<div class='palm-row'>
    <div class='palm-row-wrapper'>
        <div x-mojo-element="ToggleButton"></div>
        #{title}
    </div>
</div>

2。在 list-assistant.js 设置函数中（注意，我使用的是 jQuery）

Mojo.Event.listen(jQuery("#my-list").get(0), Mojo.Event.propertyChange, this.listPropertyChangeHandler.bind(this));

3.在 listPropertyChangeHandler

ListAssistant.prototype.listPropertyChangeHandler = function(event){
    var newValue = event.model.value;
}

【讨论】：