jsrender和seajs半天學習收穫

時間 2019-11-13

標籤 jsrender seajs 半天學習收穫简体版

原文原文鏈接

參考地址：http://josh-persistence.iteye.com/blog/1914697javascript

我把他上面的幾個例子，用一個例子寫完，主要是特別懶，不想多建幾個文件。前端的框架雖多，學習起來的難度也不大，只不過要懂具體怎麼來的，仍是有必定的差距。留做之後備用吧！html

其中resource.explore.com是我本身在本地搭建的一個IIS資源網站。前端

html頁面代碼：java

<html>
<head>
    <title>學習sea01</title>
      <script type="text/javascript" src="http://resource.explore.com/jquery/jquery-1.7.1.min.js"></script>
     <script src="http://resource.explore.com/sea.js"></script>
    <script type="text/javascript">
seajs.config({

    // 解析頂級域名
    base:"http://resource.explore.com/",

    // 別名
    alias:
    {
        "jsRender":"http://resource.explore.com/jquery.jsRender.min.js",
        "underscore":"http://resource.explore.com/underscore.js",
        "seastudy01":"http://resource.explore.com/seastudy/seastudy01.js"
    },

    // 預加載
    preload:["underscore","jsRender","seastudy01"],
});

// 頁面加載模塊
seajs.use(["underscore","jsRender","seastudy01"]);

    </script>
</head>
<body>
    <p><em><h2>1: Output Tag {{:...}}</h2></em></p>  
    <div id="result1"></div>
    <script id="result1Tmpl" type="text/x-jsrender">
        <p>{{:name}}</p>
    </script>

    <div id="result2"></div>
    <script id="result2Tmpl" type="text/x-jsrender">
        <b>{{:#index+1}}</b>
        {{:name}}:lives in <b>{{:address.city}}</b>.<br/>
    </script>
    <p><em><h2>2: Output Tag {{>...}}</h2></em></p> 

    <script id="result3Tmpl" type="text/x-jsrender">
    <p style="color:green;">包含html的，瀏覽器解析爲對應的樣式</p>
    {{:description}}<br/>
    <p style="color:green;">輸出原始的字符串</p>
    {{>description}}
    </script> 
    <div id="result3"></div>

    <p><em><h2>3. {{include tmpl=... /}} 標籤用於組合模板(template composition) -----用於在一個模板中引入另外一個模板，並用上下文的數據來渲染template。</h2></em></p>  
    <script id="peopleTemplate" type="text/x-jsrender">
    {{:name}} lives in {{include tmpl='#addressTemplate'/}}<br/>
    </script>
    <script id="addressTemplate" type="text/x-jsrender">
    <b>{{>address.city}}</b>
    </script>
    <div id="peopleList"></div>

    <p><em><h2>4. {{for ...}}遍歷數組和對象</h2></em></p> 
    <script id="result4Template" type="text/x-jsrender">
    <b>{{:title}}</b>
    <ul>
    {{for members}}
    <li>{{:name}} lives in </b>{{:address.city}}</b></li>
    {{/for}}
    </ul>
    </script>
    <div id="result4"></div>

    <p><em><h3>4.1 在{{for...}}與{{for...}}之間使用{{else...}}</h3></em></p>  
    <script id="result5Template" type="text/x-jsrender">
    <b>{{:title}}</b>
    {{for members}}
    <div>{{:name}}</div>
    {{else}}
    <div>No members</div>
    {{/for}}
    </script>
    <div id="result5">
    </div>

    <p><em><h2>5 複雜一點的</h2></em></p>  
    <script id="result6Template" type="text/x-jsrender">
    <h4>{{:title}}</h4>
    {{if members && members.length}}
    <ul>
    {{for members}}
    <li>{{:name}}</li>
    {{/for}}
    </ul>
    {{else standby && standby.length}}
    Standby only:
    <ul>
    {{for standby}}
    <li>{{:name}}</li>
    {{/for}}
    </ul>
    {{else}}
    No Members!
    {{/if}}
    </script>
    <div id="result6"></div>
</body>
</html>

js代碼以下：jquery

define(function(){
    var mainMoudle = {
        main:function()
        {
            mainMoudle.initEvent();
        },
        result1deal:function()
        {
            var    data1 = {  
                "name": "Josh",  
                "address": {  
                   "city": "Shanghai"  
                }     
            }  

            mainMoudle.renderHtml("result1Tmpl","result1",data1);
        },
        result2deal:function()
        {
            var data2=[  
                {  
                    "name": "Josh",  
                    "address": {  
                    "city": "Shanghai"  
                    }  
                },  
                {  
                    "name": "Wangsheng",  
                    "address": {  
                        "city": "BiJie"  
                    }  
                }  
                ];

            mainMoudle.renderHtml("result1Tmpl","result1",data2);
        },
        result3deal:function()
        {
            var data = {  
                  "description": "A <b>very nice</b> appartment"  
                };  
            mainMoudle.renderHtml("result3Tmpl","result3",data);
        },
        resultPeople:function()
        {
            var people = [  
              {  
                "name": "Pete",  
                "address": {  
                  "city": "Seattle"  
                }  
              },  
              {  
                "name": "Heidi",  
                "address": {  
                  "city": "Sidney"  
                }  
              }  
            ];  

            mainMoudle.renderHtml("peopleTemplate","peopleList",people);
        },

        result4deal:function()
        {
            var data = {  
              "title": "The People:",  
              "members": [  
                {  
                  "name": "JoshWang",  
                  "address": {  
                    "city": "ShangHai"  
                  }  
                },  
                {  
                  "name": "WangSheng",  
                  "address": {  
                    "city": "GuiYang"  
                  }  
                }  
              ]  
            };  

            mainMoudle.renderHtml("result4Template","result4",data);
        },
        result5deal:function()
        {
            var data = {  
              "title": "The A team",  
              "members": []  
            };  

            mainMoudle.renderHtml("result5Template","result5",data);
        },

        result6deal:function()
        {
            var data = [  
              {  
                "title": "The A team",  
                "members": [  
                  {  
                    "name": "JoshWang"  
                  },  
                  {  
                    "name": "Micheal Shi"  
                  }  
                ],  
                "standby": [  
                  {  
                    "name": "Xavier"  
                  }  
                ]  
              },  
              {  
                "title": "The B team",  
                "members": [],  
                "standby": [  
                  {  
                    "name": "Dunk"  
                  },  
                  {  
                    "name": "Adriana"  
                  }  
                ]  
              },  
              {  
                "title": "The C team",  
                "standby": []  
              }  
            ];  

            mainMoudle.renderHtml("result6Template","result6",data);
        },
        renderHtml:function(tempId, renderId, data)
        {
            var tempHtml = $('#'+tempId+'').render(data);
            $('#' + renderId + "").html(tempHtml);
        },

        initEvent:function(){
            mainMoudle.result1deal();
            mainMoudle.result2deal();
            mainMoudle.result3deal();
            mainMoudle.resultPeople();
            mainMoudle.result4deal();
            mainMoudle.result5deal();
            mainMoudle.result6deal();
        }
    };

    $(function () {
        mainMoudle.main();
    });
});

結果以下：數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。