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

这个示例来源于帖子 http://bbs.csdn.net/topics/392182238。楼主要生成一个树形结构的 html 视图:

这个 html 的要求比较简单,Less.Html 的解析优势并不是很明显,但总比拼接要好的。我在这个示例中使用了三个修改 html 节点的方法,分别是 html、after 和 append,还有修改节点属性的方法 attr:

//绘制本节点
q("span").html("用户" + item.name);

//绘制子节点
q("div").after("<ul></ul>");

//左边节点
dynamic left = data.Where(
    i =>
    i.pid == id &&
    i._float == "left").FirstOrDefault();

q("ul:first").append(
    q(
        "
  • " + this.RenderNode( data, left != null ? left.id : -1, template) + "
  • ").attr("style", "float:left")); //右边节点 dynamic right = data.Where( i => i.pid == id && i._float == "right").FirstOrDefault(); q("ul:first").append( q( "
  • " + this.RenderNode( data, right != null ? right.id : -1, template) + "
  • ").attr("style", "float:right"));

    这些方法的使用方式也是和 jQuery 一样的。

    本示例代码:GitHub    码云

    运行结果:

    广州必简信息科技有限公司 版权所有 粤ICP备15047625号-2