位置:首页  >   前端编程  > sea.js和doT.js结合在项目中的应用

sea.js和doT.js结合在项目中的应用

html 页面

<div class="sidebar-content ">

        <h4 class='pos-rel pd-lt10 '>
            <div class="let40"><i class='line'></i>询单详情</div>
        </h4>
<hr>
<div class="mar-tp40">
<!--这里存放使用js 放置好的数据 的html-->
</div>
        <?php $this->load->view('menu/footer'); ?>
</div>
</div>
<script id="infoed" type="text/x-dot-template">
<h4 class="mar-bt20"><strong>询价单</strong></h4>
<div class="order-creat-form brf5">
<h4 class='mar-tp20'>项目信息</h4>
<div class="enroll_two">
<p class="order-info-p"><span>项目名称:</span>{{=it.rfpInfo.actionName || ''}}</p>
<p class="order-info-p"><span>项目起止日期:</span>{{=it.rfpInfo.actionTime || ''}}</p>
<p class="order-info-p"><span>项目地点:</span>{{=it.rfpInfo.cityName || ''}}</p>
<p class="order-info-p"><span>项目预算:</span>{{=it.rfpInfo.budget || ''}}</p>
                    <p class="order-info-p"><span>进场时间:</span>{{=it.rfpInfo.enterPlaceTime || ''}}</p>
</div>
                <h4 class='mar-tp20'>服务内容简述</h4>
                <div class="enroll_two">
                    <p class="pd-lt20">{{=it.rfpInfo.remark || ''}}</p>
                </div>
<h4 class='mar-tp20'>附件</h4>
                <div class="enroll_two">
                    <div class="order-info-p clearfix"><span class='pull-left'>询价清单模板:</span>
                        <div class='over-hide'>
                            {{ for(var prop in it.atachment.rfpXls) { }}
                            <a href="{{=it.atachment.rfpXls[prop].file_path || ''}}" class='underline color' target="_self">{{=it.atachment.rfpXls[prop].file_name || ''}}</a><a href="{{=it.atachment.rfpXls[prop].file_path || ''}}" class='mar-lt10' target="_self">点击下载</a><br />
                            {{ } }}
                        </div>
                    </div>
                </div>
            </div>
</script>
<!-- 修改弹窗 -->
<div id="change-edit" class='mar-tp20 none'>

    <form action="" id='form-charge'>
     .......
    </form>

</div>
<script type="text/javascript" src="<?php echo base_url('assets/js/sea.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/sea-config.js'); ?>"></script>
<script type="text/javascript">

seajs.use('jquery',function($){
seajs.use(['search-infoed','public'],function(start){
start({
//rfpInfo:"search-infoed.json",//已处理询单详情
rfpInfo:"rfpInfo",//已处理询单详情
                    update_rfp_reponse_json:"update_rfp_reponse_json",//编辑询单报价
});
});
});

</script>


</body>
</html>


search_infoed.js  如下:


/*显示*/


define(function(require, exports, module) {

require("layer");
require("doT");
require("jquery.form");

function start(obj){
var cid = window.location.search.substr(4);
$("#cid").val(cid);

function getInfo(){
var url =obj.rfpInfo;
$.ajax({
type:"GET",
url:url,
dataType:"json",
data:{
id :cid
},
success:function(response,status,xml){
//console.log(response);
if(response.code == 0){
var dataEncode = response.data;
var EncodeText = doT.template($("#infoed").text());
$(".mar-tp40").html(EncodeText(dataEncode));
}
}
});
};
getInfo();


$("#form-charge").submit(function(){
if($("#totalPrice").val() ){
charge();
}else{
layer.msg('请完善信息!', {icon: 2});
}
return false;
});


}
module.exports = start;
});


说明doT.js

https://github.com/olado/doT

基本使用参考: http://www.cnblogs.com/kuikui/p/3505768.html




0
文章属性
精彩评论