如何在不使用合金时在Appcelerator(移动网络)中设置DIV属性ID

Question

我在跨平台解决方案（iOS，Android，MobileWeb）中使用Appcelerator。 我希望能够在移动网站中看到我的 UI 元素的 id 属性。 我已经看到了如何使用Alloy设置id的示例，但我不使用Alloy，我用JavaScript编写所有元素的脚本。

有人可以告诉我必须应用于视图的属性才能在 html 中生成的 DIV 中设置 id。

下面是一个示例视图：

this.Viewer = Ti.UI.createScrollView(
{
    left:25,
    right:5,
    bottom:5,
    top: 0,
    width: this.App.Width - 40,
    height:  200,
    contentHeight: Ti.UI.SIZE,
    borderColor: "#333333",
    borderWidth: 3,
    horizontalWrap: false,
    layout:"vertical",
    scrollType: "vertical",
    scrollsToTop: true,
    showVerticalScrollIndicator: true,
    showHorizontalScrollIndicator: false,
    verticalBounce: false,
    visible: true,
    zIndex:100
});

和生成的 HTML

<div class="TiUIElement TiUIView TiLayoutsComposite" data-widget-id="Ti.UI.View:36" style="background-color: rgb(0, 255, 0); background-repeat: no-repeat; background-size: 100% 100%; border-color: rgb(51, 51, 51); border-width: 2px; left: 5px; top: 90px; width: 507px; height: 626px;"></div>

Answer 1

Titanium Mobile Web旨在模仿原生iOS和Android平台。由于iOS和Android没有DOM的概念，因此没有Titanium API来公开DOM。

换句话说，你不应该能够在<div>上设置"id"，甚至不知道<div>存在。

但是，如果您绝对需要，您可以这样做。所有 UI 元素上都有一个属性，称为 domNode 。这仅在钛移动网站上可用。您需要尝试一下才能在iOS或Android上运行您的应用程序。

var myButton = Ti.UI.createButton({ title: 'click me' });
if (Ti.Platform.name === 'mobileweb') {
    myButton.domNode.setAttribute('id', 'foo');
}

专业提示：钛移动Web无法访问浏览器的垃圾收集器，因此如果删除UI元素，则必须显式调用未记录的destroy()方法，以便断开事件，销毁DOM节点，并将状态进行垃圾回收。

myButton.destroy && myButton.destroy()

Answer 2

您应该能够像这样将id属性添加到视图创建函数中。

this.Viewer = Ti.UI.createScrollView(
{
    id: 'myView',   // <---- HERE IS YOUR ID
    name: 'myView', // <---- IF YOU NEED THE `NAME` ATTRIBUTE AS WELL
    left:25,
    right:5,
    bottom:5,
    top: 0,
    width: this.App.Width - 40,
    height:  200,
    contentHeight: Ti.UI.SIZE,
    borderColor: "#333333",
    borderWidth: 3,
    horizontalWrap: false,
    layout:"vertical",
    scrollType: "vertical",
    scrollsToTop: true,
    showVerticalScrollIndicator: true,
    showHorizontalScrollIndicator: false,
    verticalBounce: false,
    visible: true,
    zIndex:100
});