操作无法使用自定义控件上的呈现属性集，该控件包含操作按钮

Question

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

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

因此，我设置了一个自定义控件，其中包含移动设备的UI。我使用所述自定义控件的"rendered"属性来隐藏或显示它，基于我帖子中的参数值。

这是一个奇怪的问题：

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

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

当我移除自定义控件的呈现属性时，它会起作用。如果我再次将渲染的属性放回，它将不起作用。

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

知道吗？

附言：这是一个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';}">
    ...