Juicer 使用范例

导入juicer

<script type="text/javascript" src="juicer-min.js"></script>

在js部分编写模板页面

    <script id="connectionTpl" type="text/template">
            <input type="hidden" value="{%id}" id="mid"/>
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-sitemap"></i>XXX
                    </div>
                </div>
                <div class="portlet-body flip-scroll">
                    <table class="table table-bordered table-striped table-condensed flip-content">
                        <thead class="flip-content">
                            <tr class="table-border-bottom" align="center">
                                <th style="width: 5%; word-wrap: break-word; word-break: break-all;">序号</th>
                                <th>XXX</th>
                                <th>XXX</th>
                                <th>XXX</th>
                                <th>XXX</th>
                                <th>XXX</th>
                                <th>XXX</th>
                            </tr>
                        </thead>
                        <tbody>
                            {@if list.length==0}
                                <tr align="center"><td colspan="7"><font color="red">目前没有已关联的商品</font></td></tr>
                            {@/if}
                            {@each list as item,i}
                                <tr align="center" id="{%item.id}">
                                    <td>{%i-0+1}</td>
                                    <td><img src="{%item.thumbUrl}" class="iconStyle" /></td>
                                    <td>{%item.productName}</td>
                                    <td>{@if item.productCode!=null}{%item.productCode}{@/if}</td>
                                    <td style="text-align:right;">{%item.salesVolume}</td>
                                    <td>
                                            {@if item.status=='I' }
                                                <i class="icon-remove" />
                                            {@/if}
                                            {@if item.status=='A' }
                                                <i class="icon-ok" />
                                            {@/if}
                                    </td>
                                    <td value="{%item.id}">
                                        <span class='single{@if item.connection=='S'} highlighticon{@/if}' title="XXX"><i class="icon-long-arrow-right"></i></span>
                                        <span style="margin-left:5px;" class='both{@if item.connection=='B'} highlighticon{@/if}' title="XXX"><i class="icon-resize-horizontal"></i></span>
                                    </td>
                                </tr>
                            {@/each}
                        </tbody>
                    </table>
                </div>
        <div class="pull-right">
            <button id="addConnection"  class="btn blue"  value="{%id}">XXX</button>
        <div>
        <div class="pull-right" style="margin-top:20px;"></div>
    </script>

这里面有一些条件判断语句，还有一些是和后台绑定数据的语句。

使用js调用这个模板

var connectionTpl =document.getElementById('connectionTpl').innerHTML;
 $('#connection').html(juicer(connectionTpl, {id:id,list:products}));

然后就成了。

总结

我目前就学了这么多，写这儿算是给自己一个备份，欢迎评论。谢谢。