钛合金onClick参数

Posted 2023-02-26

【中文标题】钛合金onClick参数

【英文标题】：titanium alloy onClick parameters

【发布时间】：2014-12-19 16:36:54

【问题描述】：

首先：我正在练习使用钛，这只是我第一个对框架充满信心的“Hello World”应用程序，所以任何建议都会非常感谢。

我有这个简单的看法：

        <ScrollView id="grid" dataCollection="pictures">
            <View class="single-item" title="title" author="author" desc="desc" onClick="showPic">
                <ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
                <Label class="title" text="title by author" />
                <Label class="desc" text="desc" />
            </View>
        </ScrollView>

单击每个项目，我都会调用控制器中定义的函数 showPic()，这没关系。但我想将一些参数传递给该函数，即 title、author 和 desc，以便我可以处理它们并将它们“打印”到每个特定项目的新详细视图上。使用 TableView 很容易（我只是将：event.source -> title, event.source -> author ... 放在我的控制器中，我可以读取该表行数据），但我的观点似乎不起作用。

所以我的问题是： 1）如何将参数从 VIEW: 传递到 CONTROLLER showPic() 2）一般来说，如果有更好的视图来列出一些对象并单击打开每个对象，请告诉我如何了解更多内容：D（PS：我不能使用 tableView，因为我的布局不适合这种观点）

---- 编辑：下面是我的完整代码

index.xml：

<Alloy>
    <Collection src="pictures"/>
    <NavigationWindow id="navGroupWin">
        <Window class="container" title="La mia galleria">
            <View class="arrow arrow-up"><Label text="UP" /></View>

            <ScrollView id="grid" dataCollection="pictures">
                <View class="single-item" title="title" author="author" desc="desc" onClick="showPic">
                    <ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
                    <Label class="title" text="title by author" />
                    <Label class="desc" text="desc" />
                </View>
            </ScrollView>

            <View class="arrow arrow-down"><Label text="DOWN" /></View>

        </Window>
    </NavigationWindow>
</Alloy>

来自 index.js 的显示图片：

function showPic(event) 

    var pic = event.source;
    var args = 
        title: pic.title,
        desc: pic.desc,
        author: pic.author
    ;
    var picView = Alloy.createController("detail", args).getView();

    if (OS_ios) $.navGroupWin.openWindow(picView);
    if (OS_android) picView.open();

detail.xml：

<Alloy> 
    <Window class="container">
        <View layout='vertical'>
            <Label id="titleLabel"></Label>
            <Label id="descLabel"></Label> 
            <Label id="authorLabel"></Label>
        </View>
    </Window> 
</Alloy>

detail.js

var args = arguments[0] || ;
$.titleLabel.text = args.title || 'Default Title';
$.descLabel.text = args.desc || 'Default desc';
$.authorLabel.text = args.author || 'Default author';

当我点击索引的每个项目时，我的 source.title、source.author 和 source.desc 似乎是空的，并且在详细信息窗口中我只返回了“默认”值

【问题讨论】：

你能提供你的js代码吗？ e.source 应该可以正常工作

谢谢，我用完整的代码编辑了我的第一篇文章！

【参考方案1】：

我不确定您是否可以在视图文件级别执行此操作。

我会尝试为每个视图元素分配 id（这是一种通用技术）并在控制器文件中完全部署我的所有点击侦听器，从视图中删除所有 onClick 命令。

所以：

在您的视图中设置id="myview" 和class="single-item"

在你的控制器中尝试

$.myview.addEventListener('click', function(e) showPic(e.title, e.author, e.desc) );

【讨论】：

谢谢，但我得到了一个运行时错误（$.myview 是'未定义'）。可能是因为具有相同 ID 的多个对象？ （如果我在单个项目上设置 id="myview" 则有效，而不是在包含多个项目的循环中使用它）

@btb84 - 每个页面上的 ID 必须是唯一的 - 类可以在多个地方使用（正如您从传统的 web 和 css 中知道的那样）。您可以在标记中指定 onClick 事件，并为要触发事件的每个元素调用函数 - 然后检查被解析为该函数参数的事件对象。尝试调试它以查看您可以使用哪些信息...

【参考方案2】：

不确定它是否在其他地方出错，但像这样剥离它可以工作：

index.html

<Alloy>

        <Window id="test">          
            <ScrollView id="grid" layout="vertical">
                <View class="single-item"   backgroundColor="blue" title="title" author="author" desc="desc" onClick="showPic">                   
                </View>
                <View class="single-item"   backgroundColor="red" title="red" author="red" desc="red" onClick="showPic">                   
                </View>
                <View class="single-item"   backgroundColor="yellow" title="yellow" author="yellow" desc="yellow" onClick="showPic">                   
                </View>
                <View class="single-item"   backgroundColor="green" title="green" author="green" desc="green" onClick="showPic">                   
                </View>
            </ScrollView>
        </Window>

</Alloy>

index.js

function showPic(event) 
    Ti.API.info(JSON.stringify(event.source));    


$.test.open();