javascript - 操作不适用于自定义控件上的呈现属性集，包含操作按钮

Question

我遇到了一个奇怪的问题。这是情况:

我正在使用基于屏幕尺寸显示和隐藏内容的解决方案:https://xpagesandme.wordpress.com/2015/01/20/diving-into-bootstrap-and-font-awesome-part-3-displaying-hiding-content-based-on-device-type/

因此，我设置了一个自定义控件，其中包含移动设备的 UI。我正在使用所述自定义控件的“呈现”属性根据我帖子中的参数值隐藏或显示它。

这是一个奇怪的问题:

在自定义控件中，我有一个按钮，它应该设置一个作用域变量，在模态内的面板上进行部分刷新，然后显示模态(打开模态的调用在事件处理程序)。

模式打开，但作用域变量未更新。

当我删除自定义控件的呈现属性时，它可以工作。如果我再次将呈现的属性放回原处，它就不起作用。

此外，任何简单的操作(即打开页面)都不起作用。但是，我放入事件处理程序的 onComplete 或 onStart 事件中的 CSJS 将被执行。

有什么想法吗？

P.S.:这是一个 XPage 示例。删除任何按钮的呈现属性，onClick 事件中的代码将起作用:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:eventHandler
        event="onClientLoad"
        submit="false">
        <xp:this.script><![CDATA[$(window).on('load resize', function(){
    var screenWidth = $(window).width();
    var sDevice = '';

    switch(true){
        case (screenWidth < 768):
            sDevice = 'mobile';
            break;
        case (screenWidth < 922):
            sDevice = 'tablet';
            break;
        case (screenWidth >= 922):
            sDevice = 'desktop'
    }

    XSP.partialRefreshGet( '#{id:pnlList}', {params: {'sDevice': sDevice}});
});]]></xp:this.script>
    </xp:eventHandler>
    <xp:panel
        id="pnlList">

        <xp:button
            value="Button Mobile"
            id="button1" rendered="#{javascript:param.sDevice == 'mobile';}">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="pnlToUpdate"
            onStart="alert('onStart')"
            onComplete="alert('onComplete')">
            <xp:this.action><![CDATA[#{javascript:sessionScope.put('sTestValue', 'Button Mobile clicked')}]]></xp:this.action>
        </xp:eventHandler></xp:button>
        <xp:br></xp:br>

        <xp:button
            id="button2" value="Button Tablet" rendered="#{javascript:param.sDevice == 'tablet';}">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="pnlToUpdate"
            onStart="alert('onStart')"
            onComplete="alert('onComplete')">
            <xp:this.action><![CDATA[#{javascript:sessionScope.put('sTestValue', 'Button Tablet clicked')}]]></xp:this.action>
        </xp:eventHandler></xp:button>
        <xp:br></xp:br>

        <xp:button
            value="Button Desktop"
            id="button3" rendered="#{javascript:param.sDevice == 'desktop';}">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="pnlToUpdate"
            onStart="alert('onStart')"
            onComplete="alert('onComplete')">
            <xp:this.action><![CDATA[#{javascript:sessionScope.put('sTestValue', 'Button Desktop clicked')}]]></xp:this.action>
        </xp:eventHandler></xp:button></xp:panel>
    <xp:panel id="pnlToUpdate">
        <xp:text
            escape="true"
            id="computedField1" value="#{sessionScope.sTestValue}">
        </xp:text></xp:panel></xp:view>

Answer 1

您必须在按钮中设置选项“设置部分执行模式”execMode="partial"。这将首先执行按钮的 SSJS。

否则它会首先重新计算整个页面，而不是 URL 参数 sDevice。因为未设置 sDevice，XPage 不会呈现当前部分(例如桌面面板)，也不会执行按钮的 SSJS。稍后在客户端，它将使用 URL 参数 sDevice=desktop 执行部分刷新并呈现桌面面板，但这对于执行按钮的代码来说为时已晚。

我根据您的链接修改了您的示例。它在面板“pnlList”中打印当前 URL 参数 sDevice，并在执行按钮的 SSJS 时打印“按钮已单击”。该按钮将一个随机值写入 viewScope 变量并刷新“computedField1”。通过这种方式，您可以在单击按钮、刷新页面或调整浏览器窗口大小时看到服务器控制台上发生的情况。

正如您可以测试的那样，按钮在渲染条件下工作(但如果没有 execMode="partial" 将无法工作)。如果需要，您仍然可以执行完整更新而不是示例中的部分刷新。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:eventHandler
        event="onClientLoad"
        submit="false">
        <xp:this.script><![CDATA[$(window).on('load resize', function(){
    var screenWidth = $(window).width();
    var sDevice = '';

    switch(true){
        case (screenWidth < 768):
            sDevice = 'mobile';
            break;
        case (screenWidth < 922):
            sDevice = 'tablet';
            break;
        case (screenWidth >= 922):
            sDevice = 'desktop'
    }

    XSP.partialRefreshPost( '#{id:pnlList}', {params: {'sDevice': sDevice}} );
});]]></xp:this.script>
    </xp:eventHandler>
    <xp:panel
        id="pnlList"
        rendered="#{javascript:print('param.sDevice: ' + param.sDevice); return true}">
        <xp:label
            value="I am going to be displayed if I am on a mobile device"
            id="label1"
            rendered="#{javascript:param.sDevice == 'mobile';}">
        <xp:eventHandler event="onclick" submit="true" refreshMode="complete"></xp:eventHandler></xp:label>
        <xp:br></xp:br>
        <xp:label
            value="I am going to be displayed if I am on a tablet device"
            id="label2"
            rendered="#{javascript:param.sDevice == 'tablet'}">
        </xp:label>
        <xp:br></xp:br>
        <xp:label
            value="I am going to be displayed if I am on a desktop device"
            id="label3"
            rendered="#{javascript:param.sDevice == 'desktop'}">
            <xp:button
                value="Label"
                id="button1">
                <xp:eventHandler
                    event="onclick"
                    submit="true"
                    refreshMode="partial" execMode="partial" refreshId="computedField1">
                    <xp:this.action><![CDATA[#{javascript:
                        print("button clicked"); 
                        viewScope.currentItem = Math.random();}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
        </xp:label>
    </xp:panel>
    <br />
    <xp:text
        escape="true"
        id="computedField1"
        value="#{viewScope.currentItem}">
    </xp:text>
</xp:view>

更新

不执行按钮 SSJS 代码是该方法本身的一个症状。面板“pnlList”默认呈现为空。只有在客户端加载或调整大小后，事件面板才会部分刷新并填充设备相关的内容。不幸的是，渲染标准很脆弱，因为它只是部分刷新 URL 的一部分。该按钮可能与选项 execMode="partial" 一起使用，但您可能会遇到使用此方法的其他问题。

更好的方法是让客户端告诉服务器它是什么类型的设备，服务器会将此信息保存在 viewScope 变量中，渲染条件仅使用 viewScope 变量。这样，服务器已经为当前设备呈现面板，并且只会在加载和调整大小事件时更改它。

将参数 sDevice 保存到范围变量面板的“pnlList”呈现属性(始终返回 true)并在设备特定面板的呈现条件下使用此变量:

<xp:panel
    id="pnlList"
    rendered="#{javascript:
            if (param.sDevice) {
                viewScope.device = param.sDevice;
            }
            return true}">
    <xp:button
        value="Button Mobile"
        id="button1"
        rendered="#{javascript:viewScope.device == 'mobile';}">
    ...