Question

我有一个名为overlay.xml的钛合金视图，它没有控制器。我在另一个名为episode.js的控制器中创建它并将其添加到episode.xml中的容器中。我这样做是为了使overlay.xml成为可以在任何地方添加的可重用视图。

例如

episode.js

// create the overlay view
var overlay = Alloy.createController("overlay").getView();
// add it somewhere in episode.xml
$.episodeImage.add(overlay);

在overlay.xml内部我有几个组件，例如按钮和标签，我想在Episode View中访问以添加事件侦听器。例如：

overlay.xml

<Alloy>
    <View id="overlay">
        <Button id="theButton" title="Click Me!" />
        <Label id="theLabel" text="I am a label" />
    </View>
</Alloy>

然后在 episode.js 例如：

var overlay = Alloy.createController("overlay").getView();
$.episodeImage.add(overlay);

// EXAMPLE: Get the button from overlay.xml and add an event listener
$.theButtonFromOverlayXML.addEventListener("click", function () {
    alert("You clicked the button from overlay.xml!"):
});

是否可以这样做？

Answer 1

是的，您可以通过其他控制器中的ID访问视图。唯一需要将控制器对象和视图对象分配给两个不同的变量：

<强> episode.js

var overlay = Alloy.createController("overlay");

overlay.theButton.addEventListener('click', function() {
    alert('You clicked the button from overlay.xml!');
});

var overlayView = overlay.getView();
$.episodeImage.add(overlayView);
// shorter version
$.episodeImage.add( overlay.getView() );

Answer 2

通过ID在控制器对象上公开对象。在overlay.getView()之前将它们送到那里。

但是，如果你想要的只是点击监听器，为什么不将监听器添加到叠加层，然后检查源是否是你想要点击的？这将保持视图的内部状态从消费视图中抽象出来。

overlay.addEventListener('click', function(evt) {
    if (evt.source.id === 'theButton') {
        alert('You clicked the button from overlay.xml!');
    }
});

钛合金 - 在该视图中创建没有控制器和访问组件的视图

2 个答案: