【问题标题】:Grails use gsp fragment as html template for javascript functionGrails 使用 gsp 片段作为 javascript 函数的 html 模板
【发布时间】:2015-08-26 08:48:09
【问题描述】:

我试图在我的应用程序上处理一对多的表单映射。

根据this post,我创建了类似的代码:但是,我不想将我的 html 放在 javascript 中,并且我想让一些东西可重用,所以我创建了一个小的 taglib 来处理一对多关联。 此标记库接受表示输入字段行的 gsp 片段路径作为输入,如下所示:

<div class="form-group">
<div class="row row-product-option-values">
    <div class="col-md-3 col-sm-3">
        <g:textField name="product.options[<index>].name" class="form-control"></g:textField>
    </div>

    <div class="col-md-8 col-sm-8">
        <g:textField name="product.options[<index>].values" class="form-control"></g:textField>
    </div>
    <div class="col-md-1 col-sm-1">
        <a class="btn btn-link" type="button">
            <i class="fa fa-remove"></i>
        </a>
    </div>
</div>

在我的 taglib 中,我使用该片段通过以下命令生成 javascript html 模板:

render(template: templatePath).replaceAll('\n', '').encodeAsJavaScript();

现在困难的部分是:我需要用一个 js 变量替换,每次我添加一个新的输入行时我都可以递增,但我不知道该怎么做。在过程结束时,我需要一个类似于此的字符串

"<div class=\"form-group\"> <div class=\"row row-product-option-values\"> <div class=\"col-md-3 col-sm-3\"> <input type=\"text\" name=\"product.options[" + childCount +"].name\" class=\"form-control\" value=\"\" id=\"product.options[0].name\" /> </div> <div class=\"col-md-8 col-sm-8\"> <input type=\"text\" name=\"product.options[0].values\" class=\"form-control\" value=\"\" id=\"product.options["+ childCount +"].values\" /> </div> <div class=\"col-md-1 col-sm-1\"> <a class=\"btn btn-link\" type=\"button\"> <i class=\"fa fa-remove\"></i> </a> </div> </div></div>";

有人知道如何完成这项任务吗?

感谢您的建议

卢卡

【问题讨论】:

    标签: javascript grails gsp


    【解决方案1】:
    1. 使用 AJAX:

    每当您添加新行时,使用您想要的输入对控制器进行 ajax 调用,然后从那里渲染所需的模板。 现在用结果更新/附加现有的父 div。

    1. 使用 JavaScript

    在初始化期间,将模板中的 html 存储到 javascript 变量中。每当您添加新行时,请将占位符索引替换为当前行号。

    【讨论】:

    • 是的,当然使用javascript字符串替换它是一种方法,但是如果有更好的方法来做到这一点会更好
    猜你喜欢
    • 2013-09-29
    • 1970-01-01
    • 2010-10-20
    • 1970-01-01
    • 2015-05-18
    • 2011-03-14
    • 1970-01-01
    • 2012-03-15
    • 1970-01-01
    相关资源
    最近更新 更多