js里怎么方便的输出大量的html

[sd4399340]

是这样一种需求，我要在js读取api从数据库里拿大量数据，
然后动态生成很多div乱七八糟的，大量的html，怎么样方便点呢，
js文件里出现大量的html是不是不太雅观啊

我以前是在html里写一个隐藏的div，把框架搭好，然后js填充这个div，
然后把这个填充好的div给append到别处去，用完就隐藏掉，再用的时候再append到另外的地方

大家一般咋解决的？

[lyxint]

https://github.com/janl/mustache.js

[airyland]

文本模板用<script type="text/template" id="template">some html {{data}}</script>写在html里。
用mustache之类的模板引擎render。

[catfan]

使用此方法建立fragment
var frag = document.createDocumentFragment();

在里面塞元素：
frag.appendChild(xxx);

然后把它append到需要的地方
document.getElementById('wrap').append(frag);

[turing]

https://github.com/janl/mustache.js
+1 使用有规则数据源，确定好DOM结构后按需渲染。

[jjlovegrape]

https://github.com/janl/mustache.js +1,在最近的一个项目中使用了mustache，感觉很KISS，配合backbone使用效果更佳。
http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/ 这边是个mustache.js的 tutorial,可能要翻墙。

[rociiu]

可以看看 backbone (http://documentcloud.github.com/backbone/) 轻量的前端MVC框架

[sd4399340]

@turing @lyxint 我也想过模板，这个在非node的环境下也可以用？

[turing]

@sd4399340 mustache可以完全用在客户端，支持js渲染的。

[sd4399340]

@rociiu 这个前段时间看过的，很好的东西，不过还没怎么懂~呵呵

[POPOEVER]

其实我跟你一样，我更懒，直接用 jQuery 的 html()+prepend() =_=

[tioover]

看了一下mustache
语法会和服务端的冲突，怎么解决？

[jjlovegrape]

@tioover 为什么会和服务端冲突呢？比较好的方式是，从服务端读取了JSON，然后render模板，模板支持用函数的方法填充，填充可以是{{someFunctiion}},这个函数里处理你想要的数据。{{{}}}这样使用填充的内容不会变转移。

[lene]

介不似那个谁么？学习学习~~~

[zzNucker]

@catfan 的方法是不在第三方框架介入的情况下比较高效的方法

[tioover]

@jjlovegrape 也对……

[jamev5]

@POPOEVER 彼此彼此，先在才知道还有这种办法，受教了。

[sd4399340]

@lene 矮油，这里你都玩啊~

[paulguo]

可以尝试下 Juicer（榨汁机，模板引擎 by Taobao UED）：http://juicer.name ，性能较 Mustache 等出众很多。

[kernel1983]

js template, 由于现在underscore.js已经是标配, 直接用它内置的

backbone依赖underscore, 但是我不依赖backbone

[bitsmix]

t.js 也不错。