Skip to content
This repository has been archived by the owner on Apr 9, 2024. It is now read-only.

典型不爽模板收集 #42

Open
limu opened this issue Nov 20, 2012 · 2 comments
Open

典型不爽模板收集 #42

limu opened this issue Nov 20, 2012 · 2 comments
Labels

Comments

@limu
Copy link
Member

limu commented Nov 20, 2012

大家觉得mustache不太够用,请有意识的收集下mustache力不从心的地方,请写出数据输入和HTML输出,再配上大家觉得别扭的数据处理和模板等。

@cyjake
Copy link
Member

cyjake commented Nov 20, 2012

其实用得还挺开心的…… 举个栗子,我可以利用 partials 做递归:

var tmpl = '{{#legos}}{{>lego}}{{/legos}}'
var partials = {
    lego: '' +
        '<a href="javascript:void(0)"><i class="iconfont">&#{{icon}};</i>{{name}}</a>' +
        '<div class="children">{{#children}}{{>lego}}{{/children}}</div>'
var data = {
    legos: [{
        name: 'foo',
        icon: 817,
        children: [{
            name: 'foo-child1',
            icon: 831
        }, {
            name: 'foo-child2',
            icon: 237
        }]
    }]
}
mustache.render(tmpl, data, partials)

不爽的例子自然也不少,比如有的时候好想遍历数组的时候取到那个索引值,顺便给它 +1:

{{#users}}{{__index__ + 1}}{{/users}}

另外,下边这种数据尽管很直观,但没法用 mustache 渲染:

var fonts = {
    simsun: '宋体',
    heiti: '黑体'
}

想要这样的结果的话:

<select>
    <option value="simsun">宋体</option>
    <option value="heiti">黑体</option>
</select>

只能改成:

var data = [{
    key: 'simsun',
    label: '宋体'
}, {
    key: 'heiti',
    label: '黑体'
}]

然后模板这么写:

{{#fonts}}<option value="{{key}}">{{label}}</option>{{/fonts}}

@yiminghe
Copy link

xtemplate 各种需求都能满足的:

http://docs.kissyui.com/docs/html/demo/component/xtemplate/index.html

而且可以自由选择加载

在线编译 compiler+runtime

离线编译 runtime

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants