JsRender 시리즈 데모 (5)

2432 단어 jsrender
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript" src="scripts/jquery.js"></script>

    <script type="text/javascript" src="scripts/jquery-ui.js"></script>

    <script type="text/javascript" src="scripts/jsrender.js"></script>

    <link href="scripts/demos.css" rel="stylesheet" />

    <link href="scripts/movielist.css" rel="stylesheet" />

</head>

<body>

    <script id="movieTemplate" type="text/x-jsrender">

        <tr>

            <td>{{:title}}</td>

            <td>{{for languages}}

                <div class="{{:#index%2 ? 'even' : 'odd'}}"></div>

                <em>{{:name}}</em>

                {{else}}

                No alternate languages!

                {{/for}}</td>

        </tr>

    </script>

    <h2>Using {{for}} to render hierarchical data - inline nested template.</h2>

    <table>

        <thead>

            <tr>

                <th>title</th>

                <th>movieList</th>

            </tr>

        </thead>

        <tbody id="movieList"></tbody>

    </table>





    <script type="text/javascript">

        var movies = [

		{

		    title: "Meet Joe Black",

		    languages: [

				{ name: "English" },

				{ name: "French" }

		    ]

		},

		{

		    title: "Eyes Wide Shut",

		    languages: [

				{ name: "French" },

				{ name: "Mandarin" },

				{ name: "Spanish" }

		    ]

		},

		{

		    title: "The Inheritance",

		    languages: [

				{ name: "English" },

				{ name: "German" }

		    ]

		},

		{

		    title: "Local Story",

		    languages: []

		},

		{

		    title: "My Home Video"

		}

        ];

        $("#movieList").html($("#movieTemplate").render(movies));

    </script>

</body>

</html>


  

좋은 웹페이지 즐겨찾기