用來先後端分離的

前端模板徹底用  hand +helper來寫,後臺僅restful

//li.js

//<script src="http://mockjs.com/dist/mock.js"></script>
// helper用法 這樣前端所有ok--to thi tha   {{#if price}}太貴了{{/if}}
 Mock.mock(
        'http://mockjs', 
            [{ 
            "areaname"  : '@name',     //模擬名稱
            "courtname" : '@name',     //模擬名稱
            "acreage"   : '10', 
            "myfloor|1-100":100, 
            "floor|1-100":100, 
            "roomnum|1-6":6, 
            "tingnum|1-6":6,
            "price":0,
            "liid|100-1000":1000
           }]          
        
    );


    //debugger;
    $.ajax({
        url: "http://mockjs",
        type: "get",
        processData: false,
        contentType: false,
        success: function(data) {
            alert(data);
            debugger;
            console.log("over..");
            var mdata = new Object();
            mdata.student = JSON.parse(data);
            var myTemplate = Handlebars.compile($("#table-template").html());
            $('#tableList').html(myTemplate(mdata));
        }
    });

head.js裏

            {{else}}
                        <li id="ziroom_login" style="opacity: 1;"><a href="/my/loginm" rel="nofollow">登陸</a></li>
                        <li id="ziroom_reg" style="opacity: 1;"><a href="/my/registerm" rel="nofollow">註冊</a></li>
                    
            {{/if}}
        </ul>

          </script>
         <div id="tableList1"> </div>
        <script type="text/javascript">
            debugger;
            var data={"logined":1};
            var myTemplate1 = Handlebars.compile($("#table-template-userinfo").html());
            $('#tableList1').html(myTemplate1(data));
        
        </script>

 

 

 

1223 addroom 目錄

<script type="text/javascript">

    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [116.40, 39.91]
    });

    var marker = new AMap.Marker({
        icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [116.405467, 39.907761],
        draggable: true,
        cursor: 'move',
        raiseOnDrag: true
    });
    marker.setMap(map);

    marker.on('dragend', function(e) {
        alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置移動了地圖！');
    });
</script>

search

<script type="text/javascript">
$("#rentmethod>li").click(function(e){
    $("#rentmethod>li").removeClass("active");
    $(this).addClass("active");
    alert( this.value)
});
</script>>

 

 

      <div class="form-group" style=" border-bottom: dotted 1px #ccc;">
    <label for="inputEmail3" class="col-sm-2 control-label">出租方式</label>
    <div class="col-sm-8 input-group">
    <div class="col-sm-4">
     <ul class="nav nav-pills " id="rentmethod">  
        <li  role="presentation" value="0" class="active"><a href="#">不限</a></li>
        <li  role="presentation" value="1" ><a href="#">整租</a></li>
        <li  role="presentation" value="2" ><a href="#">合租</a></li>
     </ul></div>
     <div class="col-sm-3">
              <select type="text" class="form-control valid" name="identification" id="identification" placeholder="身份" aria-invalid="false">
                    <option value="0">不限</option>
                     <option value="1">我的</option>
                     <option value="2">中介</option>
                     <option value="3">公寓</option>
         </select>
         </div>
      </div>
    </div>
<style type="text/css">
  
  .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #737ab7;
    height: 35px;
}
</style>>