模板与页面分离--javascript

最近用的模板越来越多，页面上面的，

<script type="text/html" id="tpl_item_published">
    {{#

    for(var i = 0, len = d.datas.length; i < len; i++){
    var item=d.datas[i];
    var _price_tips=(item.price<=0?"免费":parseFloat(item.price).toFixed(2));var _price_class=(item.price<=0?"":"project-price");
    var _duration=item.duration;
    var _secs=parseInt(item.duration)%60;
    var _mins=parseInt((item.duration-_secs)/60);
    _duration=(parseInt(_mins)>=0&&parseInt(_mins)<=9?"0"+_mins:_mins)+":"+(_secs>=0&&_secs<=9?"0"+_secs:_secs);
    var _description=item.description;
    if(_description.length>72){
    _description=_description.substr(0,72)+"..";
    }
    var _strOpTime=_formatOperationTime(item.operatetime);
    var _firmFlag="";

    if(item.privflag=="1"||item.privflag==1){
    _firmFlag='<i class="icon_co">企业</i>';
    }

    }}
    <div class="col-sm-6 col-md-4 _video_wrapper_{{d.curPage}}" ui="listitem" _lid="{{item.id}}"  style="display: none;">
        <div class="teach-tab">
            <div class="teach-tab-con">
                <div class="teach-thumbnail">
                    <a href="/diandi-web3/v/{{item.mseqno}}" target="_blank" _target="lesson"><img width="100%" src="{{item.thumbnail}}" οnerrοr="nofindvideopic();" ><div class="overlay"><span class="fa fa-play-circle-o"></span></div></a>
                </div>
                <div class="teach-card">
                    <span class="teach-title"><a href="/diandi-web3/v/{{item.mseqno}}">{{item.name}}</a><span>{{_firmFlag}}</span></span>
                    <span class="teach-alter">最后修改于{{_strOpTime}}</span>

                    <span class="teach-free {{_price_class}}" ui="price-tips">{{_price_tips}}</span>
                    <div _id="toShare" style="position: absolute; right:0; bottom:40px;" lessonid="{{item.id}}" lessonname="{{item.name}}" lessonthumbnail="{{item.thumbnail}}">

                    </div>

                </div>
                <div class="teach-sumbit submit-width-xs">
                    <div class="row">
						<div class="col-md-12"><a href="#" ui="btn-update-price" nowprice="{{=item.price}}" lessonId="{{item.id}}"><i class="fa fa-pencil-square-o"></i>  修改售价</a><a href="javascript:void(0);" title="{{item.name}}"  studentnum="{{item.studentnum}}" class="delete-course" ui="btn-student-list" lessonId="{{item.id}}"><i class="fa fa-list-alt"></i>  学员列表</a><a href="#" class="delete-course" data-toggle="modal" data-target="#addModal"><i class="fa fa-list-alt"></i>  添加商品</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{# }
    }}

</script>

类似的标签也越来越多。。。但是这样是不可行的。。

页面臃肿了。于是，需要提出一个管理前端模板的机制。

敬请期待。