Xpages:使用Twitter Bootstrap进行TypeAhead-将SSJS数组加载到值列表中

问题描述

我试图将BootsTrap Typeahead添加到我的Xpage之一.因此，我将所有Bootstrap内容导入了我的应用程序.当我将硬编码"值放入列表中时，它可以完美工作.但是我在SSJS库中创建了一个值"数组.

i was trying to add BootsTrap Typeahead to one of my Xpages. So i imported all the Bootstrap stuff to my application. When i put the values "hardcoded" into the list, it works perfectly. But i created an array of "Values" in a SSJS Library.

您能告诉我如何将数组从SSJS Lib放入typeahead的值列表吗?

Can you tell me how i can put that array from the SSJS Lib to the value list of typeahead?

<xp:inputText id="inputText1" styleClass="typeahead"></xp:inputText>

<script>
var value = ['test', 'birthday']
$('.typeahead').typeahead({source: value });
</script>   

谢谢

推荐答案

typeahead组件已经，转而支持Twitter的typeahead库.它确实可以在Bootstrap 2.3.2中使用.

The typeahead component has been removed in Bootstrap 3 in favour of Twitter's typeahead library. It does work in Bootstrap 2.3.2.

无论如何.您需要使用xp:scriptBlock控件来引用服务器端变量.我的第一个反应就是这样做:

Anyway. You'll need to use an xp:scriptBlock control to be able to reference server side variables. My first reaction would be to do this:

<xp:this.beforePageLoad>
  <![CDATA[
   #{javascript:viewScope.put("typeaheadOptions", ["Alabama", "Alaska"] );}
  ]]>
</xp:this.beforePageLoad>

<xp:inputText
    id="inputText1"
    styleClass="typeahead"></xp:inputText>

<xp:scriptBlock
    id="scriptBlock1">
    <xp:this.value><![CDATA[
      var value = #{viewScope.typeaheadOptions};
      $('.typeahead').typeahead({source: value });
    ]]></xp:this.value>
</xp:scriptBlock>

但是那没有用:您最终会得到如下所示的javascript:

But that didn't work: you will end up with javascript that look like this:

var value = [Alabama, Alaska];

注意条目周围缺少的引号.

Notice the missing quotes around the entries.

为解决此问题，可以在存储变量之前将其包装在toJson函数中.

To solve that you can wrap the variable in a toJson function before storing it.

<xp:this.beforePageLoad>
  <![CDATA[
   #{javascript:viewScope.put("typeaheadOptions", toJson(["Alabama", "Alaska"]) );}
  ]]>
</xp:this.beforePageLoad>

这篇关于Xpages:使用Twitter Bootstrap进行TypeAhead-将SSJS数组加载到值列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！