XPages and materialize-tags plugin

Question

我正在尝试在xpages中的bootstrap 3模式中实现以下插件。我非常接近，但我陷入了某个时刻，我不知所措。希望有人可以将我指向正确的方向。

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

目标是，当我在重复控件中单击一行时，它将在模式中显示该文档的模态和关键列表字段（使用标签/材料设计芯片）。

这是我对模式的呼唤：

<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>

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

任何想法都赞赏...

非常感谢。

问：

dan

Answer 1

data-role="materialtags"自动将您的输入转换为'材料标签'，但仅在页面加载上可以做到这一点。当您部分刷新对话框/对话框内容时，新输入值不会自动转换为材料标签。

Bootstrap模式具有显示时会触发的事件，因此我将连接将输入转换为其中的代码。类似：

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

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