Question

我正在尝试在XPage中的bootstrap 3模式中实现以下插件。我已经非常接近了，但我一度陷入困境，我不知所措。希望有人能指出我正确的方向。

这是插件：http://henrychavez.github.io/materialize-tags/examples/

目标是当我点击重复控件中的一行时，它会打开一个模态，该文档的KeywordList字段将显示在模态中（使用标签/材料设计芯片）。

这是我对模态的呼吁：

<xp:this.attrs>
<xp:attr name="data-toggle" value="modal">
</xp:attr>
<xp:attr name="data-keyboard" value="false">
</xp:attr>
<xp:attr name="data-backdrop" value="static">
</xp:attr>
<xp:attr name="data-target" value="#editKeywordModal">
    </xp:attr>
</xp:this.attrs>
<xp:eventHandler event="onclick" submit="true"  refreshMode="partial" refreshId="pnlRequests">
    <xp:this.action><![CDATA[#{javascript: var db:NotesDatabase = session.getDatabase(sessionScope.serverPath,sessionScope.requestsdbName);
var unid = rowData.getUniversalID(); 
viewScope.keyworddocUNID = unid;}]]></xp:this.action>
<xp:this.onComplete>
var id = "#{id:pnlConfigKeywordListModal}"
XSP.partialRefreshGet(id,{
onComplete: function(){
$('#editKeywordModal').modal('show');
}});
</xp:this.onComplete>
</xp:eventHandler>

并且在模态（editKeywordModal）内部，面板（pnlConfigKeywordListModal）是我的字段以显示关键字。 configkeywordDoc是与我单击的行对应的文档数据源：

<xp:inputText type="text" value="#{configkeywordDoc.KeywordList}" id="inputText1">
        <xp:this.attrs>
            <xp:attr name="data-role" value="materialtags"></xp:attr>
        </xp:this.attrs>
</xp:inputText>

如果我有静态列表，它会很有用。但是，当我在打开它之前对该模态执行部分刷新时，它会在打开时闪烁一秒钟（我可以看到芯片），然后我丢失了标签/芯片，它们在输入文本中显示为逗号分隔的字符串字段。

任何想法都赞赏......

非常感谢。

此致

丹

Answer 1

data-role="materialtags"会自动将您的输入转换为＆＃39;素材标记＆＃39;但它只会在页面加载时执行此操作。当您对对话框/对话框内容进行部分刷新时，新输入值不会自动转换为材质标记。

Bootstrap模式具有在显示时触发的事件，因此我将挂钩将输入转换为其中的代码。类似的东西：

x$("#{id:yourModalId}").on("shown.bs.modal", function (event) {
  var modal = $(this);
  var inputs = x$("inputs", modal).materialtags();
});

当您的模态（检查模态ID）显示，然后将模态中的所有输入转换为材质标记时，将触发此代码。

XPages和materialize-tags插件

1 个答案: