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();
    });
});

结果以下：数组