钛合金onClick参数

Question

首先：我正在练习使用钛，这只是我第一个对框架充满信心的“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 似乎是空的，并且在详细信息窗口中我只返回了“默认”值

Answer 1

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

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

所以：

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

2. 在你的控制器中尝试

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

Answer 2

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

index.html

<Alloy>

        <Window id="test">          
            <ScrollView id="grid" layout="vertical">
                <View class="single-item" width="250" height="250" backgroundColor="blue" title="title" author="author" desc="desc" onClick="showPic">                   
                </View>
                <View class="single-item" width="250" height="250" backgroundColor="red" title="red" author="red" desc="red" onClick="showPic">                   
                </View>
                <View class="single-item" width="250" height="250" backgroundColor="yellow" title="yellow" author="yellow" desc="yellow" onClick="showPic">                   
                </View>
                <View class="single-item" width="250" height="250" 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();