Question

我遇到了一个奇怪的问题。情况如下：

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

因此，我设置了一个自定义控件，其中包含移动设备的UI。我正在使用＆＃34;渲染＆＃34;所述自定义控件的属性，用于隐藏或显示它，基于我帖子中的参数值。

这是一个奇怪的问题：

在自定义控件中，我有一个按钮，应该设置一个范围变量，在模态内的面板上进行局部刷新，然后显示模态（打开模态的调用是在onComplete事件的内部）事件处理程序）。

模态打开，但范围变量未更新。

当我删除自定义控件的呈现属性时，它可以工作。如果我再次将渲染的属性放回去，它就无法工作。

此外，任何简单的操作（即打开页面）都不会起作用。但是，我将放入事件处理程序的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

您必须设置选项＆＃34;设置部分执行模式＆＃34;按钮中的execMode="partial"。这将首先执行按钮的SSJS。

否则，如果没有URL参数sDevice，它将首先重新计算整个页面。由于未设置sDevice，因此XPage不会呈现当前部分（例如桌面面板）并且不会执行按钮的SSJS。稍后在客户端，它将使用URL参数sDevice=desktop执行部分刷新并渲染桌面面板，但这对于执行按钮的代码来说太迟了。

我从您的链接修改了您的示例。它在面板＆＃34; pnlList＆＃34;中打印当前URL参数sDevice。和打印＆＃34;按钮点击＆＃34;当按钮的SSJS被执行时。该按钮将随机值写入viewScope变量并刷新＆＃34; computedField1＆＃34;。这样，您可以在单击按钮，刷新页面或调整浏览器窗口大小时查看服务器控制台上发生的情况。

正如您可以测试的那样，按钮适用于渲染条件（但在没有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代码是方法本身的症状。面板＆＃34; pnlList＆＃34;默认情况下呈现为空。只有在客户端加载或调整大小事件面板之后，才会部分刷新并填充设备所依赖的内容。不幸的是，渲染的标准很脆弱，因为它只是部分刷新URL的一部分。该按钮可能与选项execMode="partial"一起使用，但您可能会遇到此方法的其他问题。

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

将参数sDevice保存到范围变量面板＆＃34; pnlList＆＃34;呈现属性（返回始终为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';}">
    ...

不在自定义控件上设置渲染属性的操作，包含操作按钮

1 个答案: