推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
sd4399340

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

  •  
  •   sd4399340 · Apr 24, 2012 · 6323 views
    This topic created in 5141 days ago, the information mentioned may be changed or developed.
    是这样一种需求,我要在js读取api从数据库里拿大量数据,
    然后动态生成很多div乱七八糟的,大量的html,怎么样方便点呢,
    js文件里出现大量的html是不是不太雅观啊

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

    大家一般咋解决的?
    20 replies    1970-01-01 08:00:00 +08:00
    lyxint
        1
    lyxint  
       Apr 24, 2012   ❤️ 2
    airyland
        2
    airyland  
       Apr 24, 2012
    文本模板用<script type="text/template" id="template">some html {{data}}</script>写在html里。
    用mustache之类的模板引擎render。
    catfan
        3
    catfan  
       Apr 24, 2012
    使用此方法建立fragment
    var frag = document.createDocumentFragment();

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

    然后把它append到需要的地方
    document.getElementById('wrap').append(frag);
    turing
        4
    turing  
       Apr 24, 2012
    https://github.com/janl/mustache.js
    +1 使用有规则数据源,确定好DOM结构后按需渲染。
    jjlovegrape
        5
    jjlovegrape  
       Apr 24, 2012
    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
        6
    rociiu  
       Apr 24, 2012
    可以看看 backbone (http://documentcloud.github.com/backbone/) 轻量的前端MVC框架
    sd4399340
        7
    sd4399340  
    OP
       Apr 24, 2012
    @turing @lyxint 我也想过模板,这个在非node的环境下也可以用?
    turing
        8
    turing  
       Apr 24, 2012
    @sd4399340 mustache可以完全用在客户端,支持js渲染的。
    sd4399340
        9
    sd4399340  
    OP
       Apr 24, 2012
    @rociiu 这个前段时间看过的,很好的东西,不过还没怎么懂~呵呵
    POPOEVER
        10
    POPOEVER  
       Apr 24, 2012
    其实我跟你一样,我更懒,直接用 jQuery 的 html()+prepend() =_=
    tioover
        11
    tioover  
       Apr 24, 2012
    看了一下mustache
    语法会和服务端的冲突,怎么解决?
    jjlovegrape
        12
    jjlovegrape  
       Apr 24, 2012   ❤️ 1
    @tioover 为什么会和服务端冲突呢?比较好的方式是,从服务端读取了JSON,然后render模板,模板支持用函数的方法填充,填充可以是{{someFunctiion}},这个函数里处理你想要的数据。{{{}}}这样使用填充的内容不会变转移。
    lene
        13
    lene  
       Apr 24, 2012
    介不似那个谁么?学习学习~~~
    zzNucker
        14
    zzNucker  
       Apr 24, 2012
    @catfan 的方法是不在第三方框架介入的情况下比较高效的方法
    tioover
        15
    tioover  
       Apr 24, 2012
    @jjlovegrape 也对……
    jamev5
        16
    jamev5  
       Apr 24, 2012
    @POPOEVER 彼此彼此,先在才知道还有这种办法,受教了。
    sd4399340
        17
    sd4399340  
    OP
       Apr 24, 2012
    @lene 矮油,这里你都玩啊~
    paulguo
        18
    paulguo  
       Aug 30, 2012
    可以尝试下 Juicer(榨汁机,模板引擎 by Taobao UED):http://juicer.name ,性能较 Mustache 等出众很多。
    kernel1983
        19
    kernel1983  
       Aug 30, 2012
    js template, 由于现在underscore.js已经是标配, 直接用它内置的

    backbone依赖underscore, 但是我不依赖backbone
    bitsmix
        20
    bitsmix  
       Aug 30, 2012
    t.js 也不错。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1014 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 63ms · UTC 19:00 · PVG 03:00 · LAX 12:00 · JFK 15:00
    ♥ Do have faith in what you're doing.