欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

underscore.js的使用

程序员文章站 2022-06-03 11:57:33
...

插入html元素
underscore的模板

时间控件
<div style="margin-bottom: 30px">
            <form class="form form-inline" id="query-form">
                <div class="input-group">
                    <input type="text" name="start" class="form-control time-start "
                           placeholder="起始时间"/>
                </div>
                <div class="input-group">
                    <input type="text" name="end" class="form-control time-end"
                           placeholder="截止时间"/>
                </div>
                <button type="button" class="btn btn-primary btn-filter">查询</button>
            </form>
        </div>
 <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>时间</th>
                <th>收入</th>
                <th>参与人数</th>
                <th>浏览量</th>
                <th>活动数</th>
            </tr>
            </thead>
            <tbody id="biz_detail">

            </tbody>

 </table>

获取时间

        var QueryForm = {
            el: $("#query-form"),
            init: function () {
                this.el.on('click', '.btn-filter', function () {
                    Chart.get();
                    BizDetail.init()
                });
                this.el.find('.time-start').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: 'zh-cn',

                }).on('dp.change', function (e) {
                    var date = e.date.format('YYYY-MM-DD');
                }).on('hide', function (e) {
                });
                this.el.find('.time-end').datetimepicker({
                    locale: 'zh-cn',
                    format: 'YYYY-MM-DD',
                }).on('changeDate', function (e) {
                }).on('changeYear', function (e) {
                });
                return this;
            },

            getData: function () {
                return this.el.serializeArray();
            }
        };
 <script id="each_detail" type="text/html">
        <tr>
            <th><%=date%></th>
            <th><%=register_num%></th>
            <th><%=income%></th>
            <th><%=visit_num%></th>
            <th><%=join_num%></th>
        </tr>
    </script>
var BizDetail = {
            api: '{% url 'each_biz_api'%}' + '?id=' + biz_id,
            tmpl_detail: _.template($('#each_detail').html()),
            onData: function (json) {
                if (json.status === 200) {
                    var chain = _.sortBy(json.data,'date');
                    var html_detail = _.map(chain, function (item, idx) {
                        return this.tmpl_detail(item);
                    }.bind(this)).join('');
                    $('#biz_detail').html(html_detail);
                }
            },

            init: function () {
                var data = QueryForm.getData();
                console.log(data)
                $.get(this.api, data, this.onData.bind(this), 'json');

            }
        };