javascript - 修改合金项目中的小部件

Question

我有一个小部件，它是一个照片库。它的基本功能意味着它只允许用户单击缩略图，然后在 onclick 事件上放大/缩小。

我需要扩展该小部件，以便有一个按钮允许用户相应地更改其个人资料图片(如果他们选择该图片)。

以下是 widget.js 中代码的默认外观:

var topView = Ti.UI.createView({
    width:Ti.UI.FILL,
    height: Ti.UI.FILL,
    zIndex:1200,
    visible:false
});

// this gets image , adds it to top view
var imgView = Ti.UI.createImageView({
    image: url,
    width:Ti.UI.SIZE,
    height: Ti.UI.SIZE
});

//add it
topView.add(imgView);

现在要添加按钮，我可以将以下内容添加到 widget.js 中:

var button = Titanium.UI.createButton({
    title : 'Use Picture',
    top : 10,
    width : 100,
    height : 50
}); 

button.addEventListener('click', function(e) {
    Alloy.Global.Image = url;
});

topView.add(button);

这将关闭弹出窗口，并通过将其放入全局变量来返回该图像的 url。然后我可以使用它并通过在相关 Controller 中调用该图片将图片更改为新图片。

问题是，扩展 widget.js 代码的最佳方法是什么？使用全局变量是实现此目的的最佳方法吗？

Answer 1

我经常对自定义小部件执行的操作是添加回调，以便您可以直接返回值。

widget.xml

<Alloy>
    <Button title="Click me!" onTouchend="buttonClicked" />
</Alloy>

widget.js

// This will hold our callback
var onClickCallback;

// The button has been clicked, call callback
function buttonClicked(e) {
    if(typeof(onClickCallback) === 'function') {
        onClickCallback({ type:'clicked!' }); }
   }
}

// Assign our callback
function onClick(callback) {
    onClickCallback = callback;
}

// Make the onClick function public
exports.onClick = onClick;

index.xml

<Alloy>
    <Window>
        <Widget id="myWidget" src="myWidget" />
    </Window>
</Alloy>

index.js

// Now we can intercept the click within the widget
// and use the values passed
$.myWidget.onClick(function(e) {
    alert(e.type);
});