Titanium Appcelerator合金项目中的奇怪事件冒泡问题

时间:2016-02-04 19:51:24

标签: ios ipad appcelerator appcelerator-titanium appcelerator-alloy

我正在开发iOS 9.2 SDK& Titannium SDK v5.1.2.GA。

在我的iPad应用中;有一个产品标签页,其中有一个"折扣"按钮。当您单击它时,带有TextField和Picker的Popover显示如下:

enter image description here

以上内容是即时创建的。 (不使用控制器+视图)。

这是按预期工作的。我想通过在名为alloy.js的全局数组变量Alloy.Globals.ProductDiscounts = [];中记录产品的给定折扣来进一步扩展这一点(因此可以在以后使用)。

我捕捉"的方式新的折扣价是通过听"隐藏"选择器上的事件。然后更新全局数组。

出于调试目的,我添加了一个控制台日志以确保它被正确记录,然后在Appcelerator Studio控制台窗口中,我开始看到这样无穷无尽的输出:

enter image description here

我不得不杀死模拟器以阻止这种奇怪的常量空值输出。

到目前为止,这是我的代码,任何想法为什么控制台窗口会出现问题?另外,为什么我的全局阵列没有设置?或者它是否已设置,但我错过了实际的console.log条目?

// Subscribe to line discount button click event
lineDiscountButton.addEventListener('click', function(e)
{
    // Stop further events
    e.cancelBubble = true;

    // Create popover
    var discountPopover = Titanium.UI.iPad.createPopover({
        arrowDirection: Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT,
        orignalPrice: e.source.orignalPrice,
        priceButton: e.source.priceButton
    });
    var discountPopoverView = Titanium.UI.createView({
        width: 250,
        height: 210
    });

    // Create discount popover view wrapper
    var discountPopoverViewWrapper = Titanium.UI.createView({
        top: 10,
        left: 10,
        right: 10,
        bottom: 10,
        layout: 'vertical'
    });
    discountPopoverViewWrapper.add(Titanium.UI.createLabel({
        top: 0,
        left: 0,
        color: '#5C5C5C',
        font: {
            fontSize: 12
        },
        text: 'Enter a new Price'
    }));
    discountPopoverViewWrapper.add(Titanium.UI.createView({
        top: 0,
        height: 1,
        backgroundColor: '#0088CE',
        width: '100%'
    }));
    var discountPrice = Titanium.UI.createTextField({
        top: 0,
        width: '100%',
        height: Titanium.UI.SIZE,
        hintText: discountPopover.orignalPrice,
        value: discountPopover.orignalPrice,
        backgroundColor: '#FFFFFF',
        font: {
            fontSize: 18,
            fontWeight: 'bold'
        },
        color: '#5C5C5C'
    });
    discountPopoverViewWrapper.add(discountPrice);
    discountPopoverViewWrapper.add(Titanium.UI.createLabel({
        top: 10,
        left: 0,
        color: '#5C5C5C',
        font: {
            fontSize: 12
        },
        text: 'Or Select a Discount Percent'
    }));
    discountPopoverViewWrapper.add(Titanium.UI.createView({
        top: 0,
        height: 1,
        backgroundColor: '#0088CE',
        width: '100%'
    }));
    var discountPercentPicker = Titanium.UI.createPicker({
        top: 0,
        width: Titanium.UI.FILL,
        height: 112
    });
    var discountPercentValues = [];
    for (var i = 0; i <= 100; i++) {
        discountPercentValues.push(Titanium.UI.createPickerRow({
            title: i +'%'
        }));
    }
    discountPercentPicker.add(discountPercentValues);
    discountPercentPicker.addEventListener('change', function(e) {
        if (parseInt(e.rowIndex) === 0) {
            discountPrice.value = discountPopover.orignalPrice;
        } else {
            discountPrice.value = (discountPopover.orignalPrice - (discountPopover.orignalPrice * (parseInt(e.rowIndex) / 100))).toFixed(2);
        }
    });
    discountPopoverViewWrapper.add(discountPercentPicker);

    // Add discount popover view wrapper to view
    discountPopoverView.add(discountPopoverViewWrapper);

    // Set popover content view
    discountPopover.contentView = discountPopoverView;

    // Subscribe to popover hide event
    discountPopover.addEventListener('hide', function(e) {
        e.cancelBubble = true;
        Alloy.Globals.ProductDiscounts[discountPopover.priceButton.sku] = parseFloat(discountPrice.value).toFixed(2);
        Alloy.Globals.LiveBasketCollection.executeQuery("UPDATE live_basket SET Price = "+ discountPrice.value +" WHERE Sku = '"+ discountPopover.priceButton.sku +"'");
        discountPopover.priceButton.price = Alloy.Globals.DeviceDefaults.CurrencySymbol + discountPrice.value;
        discountPopover.priceButton.title = (discountPopover.priceButton.basketQuantity > 0 ? discountPopover.priceButton.basketQuantity +' x ' : '') + discountPopover.priceButton.price;
        Titanium.App.fireEvent('redrawBasket');
        discountPopover = discountPopoverView = discountPrice = discountPercentPicker = discountPercentValues = null;
        console.log(Alloy.Globals.ProductDiscounts);
    });

    //  Show popover
    discountPopover.show({
        view: lineDiscountButton,
        animated: true
    });     
});

1 个答案:

答案 0 :(得分:0)

就像一个问题......你为什么要取消冒泡。

没有更多的代码库,我只能尝试提出建议。

1)addeventlistener。

lineDiscountButton.addEventListener('click', setupData);

2)setupData

Function setupData(e) {

    lineDiscountButton.removeEventListener('click', setupData);

    Your code from the inline function.
}

一旦激活,基本上删除事件监听器,因此根据需要添加和删除。

我不想教你吸蛋,但要删除一个事件监听器,你必须使用与添加它完全相同的参数。因此事件监听器的内联函数并不理想,尽管它们将代码分离成自己的函数是可取的。

下一个合金全局......不是很好的做法。我猜您只想在应用程序运行期间获取数据,而不是将来使用。

如果您将来需要它,您可以将数据存储在属性中。

希望这有帮助

吨。