Less.Html 示例二：以 Less.Html 做视图引擎

以示例一的 html 为例，假设这是我们制作的一个网页，在网站运行的时候，我们希望为网页填充动态的数据。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>学分</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>201505047</td>
            <td>52</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>201502072</td>
            <td>65</td>
        </tr>
    </tbody>
</table>

流行的 web 开发框架都会提供视图引擎，视图引擎的作用就是为网页绑定动态数据，同样的 html 页面，可以为不同的用户，不同的状态展示不同的内容。asp.net 的 WebForms 和 MVC 就靠不同的标记语法去实现自己的视图引擎。WebForms 是 <% %>，MVC 是 @。这些标记，都代表在当前位置插入动态的数据。这种在 html里面插入 C# 或者 VB 代码的方式，缺点是对 html 代码有侵入性，会造成前端程序员和后端程序员在同一个文件上工作，这样有可能会造成代码上的冲突。

我把 Less.Html 加上了编辑的功能，使得它可以作为一个视图引擎。现在只要是我做技术选型的 web 项目，我都是使用这个视图引擎来写的，这个博客也是。编辑 html 的语法也是和 jQuery 一样的，可以看作一个服务器端的 jQuery。

            dynamic data = new[]
            {
                new { name = "Dizzy", num = "202001018", score = "80" },
                new { name = "Mira", num = "202002016", score = "85" }
            };

            Document document = HtmlParser.Parse(testHtml);

            var q = Selector.Bind(document);

            var template = q(q("tbody tr").remove()[0]);

            foreach (dynamic i in data)
            {
                var clone = template.clone();

                clone.find("td:eq(0)").text(i.name);
                clone.find("td:eq(1)").text(i.num);
                clone.find("td:eq(2)").text(i.score);

                q("tbody").append(clone);
            }

上面的代码演示了使用 Less.Html 作为视图引擎，把数据绑定到 html 文档的方式。这跟 jQuery 的使用方式是一样的，不需要任何的标记语言，只通过 css 选择器就可以找到绑定数据的位置。

绑定数据后的文档如下：

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>学分</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dizzy</td>
            <td>202001018</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Mira</td>
            <td>202002016</td>
            <td>85</td>
        </tr>
    </tbody>
</table>

本示例代码：GitHub