导航

dot.js 模版 TAFFY 操作json数据

Posted on 2015-09-22 17:19  yiyishuitian  阅读(420)  评论(0)    收藏  举报
//--------------Dot模版---------------------------

        <script id="content-template" type="text/x-dot-template">
            {{ { }}
                       {{ for(var i=0;i<it.length;i++){ }}
                        <li style="margin: 5px 0px 5px 0px">
                            <a class="  " href="activity_call.aspx?id={{= it[i].key }}">{{= it[i].name }} </a>
                            <span style="margin: 0px 0px 0px 0px" class="icon-remove " onclick="deleteCall(this,'{{= it[i].key }}')"></span>
                        </li>
                        {{ } }}
            {{ } }}
        </script>


//---------------HTML--------------------------

        <div class="quyu">
            <div style="margin: 0px 0px 0px 15px" class="list-inline " id="content">


                 <button id="btn_add" style="margin: 5px 5px 5px 5px" class="icon-plus btn btn-default " data-toggle="modal"  data-target="#call_contact"></button>
            </div>
        </div>


 
//-----------------JS部分--------------

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/doT.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/taffy-min.js"></script>
    <script>
        var friendList = [
          { "id": 1, "gender": "M", "name":"hn", "last": "Smith", "city": "Seattle, WA", "status": "Active" },
        { "id": 2, "gender": "F", "name": "Kelly", "last": "Ruth", "city": "Dallas, TX", "status": "Active" },
        { "id": 3, "gender": "M", "name": "Jeff", "last": "Stevenson", "city": "Washington, D.C.", "status": "Active" },
        { "id": 4, "gender": "F", "name": "Jennifer", "last": "Gill", "city": "Seattle, WA", "status": "Active" }
        ];

        var friend_db = TAFFY(friendList);
        console.log(JSON.stringify(friend_db().get()));
//friend_db().get() 会返回object 然后使用 JSON.stringify() 就会转为 json.


        $(document).ready(function () {


            var jsonstr = eval("(" + JSON.stringify(friend_db().get()) + ")");
                    console.log(jsonstr);
                    var content = $("#content");
                    var tpl = $("#content-template").text();
                    var tempFn = doT.template(tpl);
                    var h = content.html();
                    h = tempFn(jsonstr) + h;
                    content.html(h);
                    $("#btn_add").html(jsonstr.recordCount);


 


        });
    </script>