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

时间:2009-09-04 17:59:24

标签: webos palm-pre

对于我的palm pre app,我有一个动态生成的列表(从SQLite中提取数据,加载到模型中,绑定)。这很好用,但现在我需要为每个动态生成的项添加一个开/关切换。在模板中包含切换开关可以正常工作,但我无法正确分配窗口小部件功能。我正试图在场景中绑定小部件,但到目前为止没有运气。

有没有人知道如何在动态列表中绑定小部件的任何webOS教程(或有一个示例)?

2 个答案:

答案 0 :(得分:0)

它不优雅,但实现此目的的一种方法是使用列表助手的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的示例。例如,任务应用程序执行此操作以取消删除“特殊”项目的功能。

答案 1 :(得分:0)

得到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;
}