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

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

  •  
  •   sd4399340 · Apr 24, 2012 · 6533 views
  •   You need to sign in to view this topic
    This topic created in 5222 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  
    PRO
       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   ·   1221 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 48ms · UTC 23:40 · PVG 07:40 · LAX 16:40 · JFK 19:40
    ♥ Do have faith in what you're doing.