Как мы можем использовать только клиентский скрипт для «hide/whens»?

Question

Я работаю над большим, всемирным приложением, которое включает в себя доступ из областей с низкой пропускной способностью. Таким образом, я хочу использовать минимум SSJS или частичное обновление для всех сложных операций hide/when. Вот то, что я до сих пор для простого «скрытия/когда»:

1. Да/Нет радио кнопки, с CSJS, чтобы показать панель («Да») или скрыть панель («Нет») ,
2. Панель имеет форму Table внутри нее, а значения отображаются или скрыты, как показано в примере # 1.

3. В onClientLoad в XPage, в следующий код запускается:

   // "getRadioValue" is a simple script to return the value of a radio button 
   var v_value = getRadioValue("#{id:radioButton}"); 
   v_div = '#{javascript:getClientId("radioButtonPanel")}'; 
   // show or hide div simply use dojo to change the display of the panel 
   if (v_value == 'Yes') { 
       showDiv(v_div); 
   } else { 
       hideDiv(v_div); 
   }; 
   

Для нового документа, сценарий onClientLoad скроет "radioButtonPanel" успешно. Изменение переключателя на «Да» покажет radioButtonPanel, так же, как нажатие «Нет» скроет его. Он отлично работает! :-)

После того, как документ сохранен и вновь открыт в режиме чтения, событие onClientLoad CSJS должно прочитать сохраненное значение в документе и принять решение о отображении панели или нет. Когда документ открывается в режиме редактирования, onClientLoad запускается, считывает значение radioButton и успешно показывает или скрывает панель.

Это то, что я пытался до сих пор, чтобы заставить его работать в режиме чтения:

1. В CSJS, используя "# {JavaScript: currentDocument.getItemValueString ('RadioButton'}", чтобы получить значение,
2. Делая некоторые вычисления в «оказанных» или «видимых» свойствах, но это SSJS и, если скрыто, предотвращает любого из «показать/hideDiv» CSJS изменения видимости стиля.

3. Добавление старомодного " div ", чтобы вычислить стиль (это то, что я делал до XPages), но поскольку я больше не могу делать pass-thru html, я не могу получить CSJS-calc для стиля. В идеале, я могу сделать что-то вроде этого:

   <div id="radioButtonPanel" style="<ComputedValue>"> 
   

   Где ComputedValue бы прочитать заднюю торцевую ценность документа, и принять решение не добавлять ничего или «отображения: ни один».

Обратите внимание, что я не хочу использовать viewScopes, так как для этой длинной формы потребуется много из них для всех остальных hide/when.

Есть ли способ сделать это 100% CSJS? Я чувствую, что я очень близко, но мне интересно, есть ли что-то, чего я просто пропустил в этом процессе.

Answer 1

Прежде всего, вместо того, чтобы вычислять стиль, я бы рекомендовал вычислять класс CSS вместо этого - просто определите класс с именем hidden, который применяет правило display:none;. Тогда переключение видимости становится таким же простым, как вызов dojo.addClass или dojo.removeClass.

Во-вторых, я вижу, что вы используете синтаксис #{id:component} для получения идентификатора клиента переключателя, но с помощью SSJS для получения идентификатора клиента на панели. Используйте синтаксис id: для обоих; это по-прежнему просто оптимизация на стороне сервера, но, если есть много примеров этих вычислений, она складывается. Аналогичным образом замените #{javascript:currentDocument.getItemValueString('radioButton'} на #{currentDocument.radioButton}.Оба возвращают одно и то же значение, но последнее будет быстрее.

Наконец, любой атрибут тега pass-thru (любой компонент без пространства имен, например xp:) может быть вычислен, но вам нужно будет заполнить это выражение вручную, который атрибуты действительны для этих тегов и, следовательно, не предоставляют графический редактор выражений. Поэтому, если идеальный способ оценить начальный дисплей - обернуть содержимое в div, результат может выглядеть примерно так:

<div class="#{javascript:return (currentDocument.getValue('radioButton') == 'Yes' ? 'visible' : 'hidden');}"> 
<xp:panel> 
... 
</xp:panel> 
</div>