Juicer模板,如何在渲染前通过js修改模板内容?

发布于 2022-09-05 23:15:28 字数 1917 浏览 20 评论 0

Juicer 模板引擎

有一个需求,模板在渲染前需要对其内部的 select 进行添加 options,肯定有小伙伴会疑问什么要在渲染前更改模板,原因是这样的:此模板是两个弹出层的共用模板,页面加载的时候获得所有select options信息。有没有大牛可以提供下可行的思路...

Demo 如下:

<!-- 模板 -->
<script id="tpl" type="text/template">
    <div class="five wide field">
        <label>类型:</label>
        <!-- // 此部分通过js添加
        <select name="conditype">
            <option value="1">one</option>
            <option value="2">two</option>
        </select> -->
        {{=data.select}} // 引入的是字符串,非html标签
    </div>
</script>
<script>
    initModal();
    /*初始化模板*/
    function initModal() {
       $.ajax({
          url: 'wfConf/WfDSystemConfig.xml',
          dataType: 'xml',
          success: function(data) {
             var options = '';
             $(data).find('select selectOption').each(function() {
                 options += '<option value="'+$(this).attr('value')+'">'+
                                 $(this).html()+
                            '</option>';
             });                       
             var select = '<select name="conditype">' +
                             options +
                          '</select>';
             var selects = {data: select};
             //本想着通过juicer生成的html更改模板,
             //但是加入模板的select部分是字符串,并非想要的html代码
             var content = $('#tpl').html(juicer($('#tpl').html(), selects));
             $('#xxx').append(content);
          }  
        });
    }
</script>

ajax请求 data数据结构:

data

html 结构如下:

img

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

只是偏爱你 2022-09-12 23:15:28

难道不能通过传入数据进行if判断么?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文