在 Grails 中使用 javascript 的 GSP 片段替代方案答案

【问题标题】：GSP fragment alternative for javascript usage in Grails在 Grails 中使用 javascript 的 GSP 片段替代方案
【发布时间】：2016-08-26 15:15:20
【问题描述】：

我有一个应用程序，我经常需要从表单中的域对象的一对多关系中动态添加/删除字段组。这些字段可以是文本字段、选择、单选按钮等。我找不到任何简单的方法来做到这一点。

对于我来说，最好的解决方案是使用我的 grails 标记将 div 渲染到 javascript 字符串中，并在表单上添加删除 div。
例如点击添加

var vector = $.parseHTML('<div><label>Vector:</label><g:select from="${..}" /><g:text......');
$("#vectorDiv").append(vector);

但由于各种原因，这种方法不起作用。一个是 javascript 不允许字符串中的换行符（最后没有 / 我无法使用 grails 标签强制执行）。

我还不想开始使用 React。只是 jquery 和 grails 标签。

如果您愿意，我想就这种“设计模式”获得一些意见。在我的 gsp 中渲染一个 div。

<!--templates-->
<div id="templates" hidden>
    <div id="templateAccessoryVector" class="form-group accessoryVector">
        <div class="col-sm-4">
            <g:select class="form-control" name="accessoryVectorsTemplate.vectorId"
                      from="${Vector.getAccessoryVectors()}" optionKey="id" optionValue="alias" />
        </div>
        <label class="control-label col-sm-2">Percentage:</label>
        <div class="col-sm-2 input-group">
            <g:textField class="form-control text-right" name="accessoryVectorsTemplate.percentage" />
            <span class="input-group-addon">%</span>
        </div>
    </div>
</div>

然后在javascript中

var templateAccessoryVectorDiv = $("#templateAccessoryVector").removeAttr('id');

function addAccessoryVector(){
    var newAccessoryVectorDiv = templateAccessoryVectorDiv.clone();

    $("[name^='accessoryVectorsTemplate']", newAccessoryVectorDiv).each (function(index, element) {
        element.name = element.name.replace('accessoryVectorsTemplate', 'accessoryVectors[' + accessoryVectors + ']');
    });

    newAccessoryVectorDiv.appendTo($("#accessoryVectors"));
    accessoryVectors++;
}
//add, remove functions

所有此类模板都可以存在于模板部分中，在需要时隐藏和使用。

【问题讨论】：

标签： jquery grails gsp

【解决方案1】：

何时必须动态添加/删除这些字段？如果是在请求之后，您可以使用 Ajax 执行此请求，然后根据响应（例如 200），在 Ajax 回调中将这些字段附加到您的页面。或者，您可以使用 gsp 模板（例如 _fields）而不是使用 JS 创建 HTML 元素，然后连同来自控制器的响应一起发送，例如：render template: "fields"

希望对你有帮助:)

祝你好运！

【讨论】：

这是我们一直为这种动态添加/删除项目界面采取的方法。我们使用 GSP 呈现添加元素并通过 JQuery AJAX 调用获取它们。

【解决方案2】：

我认为最好的解决方案可能是标签库。您可以为每个字段设置一个标签。在控制器中，您只需将选项卡传递给渲染，在 GSP 中您可以相应地使用标签。

通过这种方式，您可以获得对 g:tag 和 javascript（如果有）的支持。

了解如何创建自定义标签：link1 和 link2

【讨论】：