第5小时（source|view）

望着代码小moon思考了个问题，能否把user抽出来，单独做成个模板呢？

其实在partials部分已经说的很清晰，小moon很快滴重构了下代码

<script id="user-list-tmpl" type="x-tmpl-mustache">
    {{#users}}
        {{> user}}
    {{/users}}
</script>

<script id="user-tmpl" type="x-tmpl-mustache">
    <div class="user-item">
        <span class="name">{{name}}</span>生活在<a href="#">{{location}}</a>!
    </div>    
</script>

这样列表模板看起来能更轻量级一些，小moon很是满意，继续飞快地敲打着键盘

function renderUser(data) {
    var userListTmpl = document.querySelector('#user-list-tmpl').innerHTML;
    Mustache.parse(userListTmpl);
    var rendered = Mustache.render(userListTmpl, data, {
        user: document.querySelector('#user-tmpl').innerHTML
    });

    return rendered;
}

虽然不是真正的组件化（react、vue等在做的东西），但小moon已经在心里给予了它超能力

<UserList>
    <User>
    </User>
</UserList>

经过这次的项目，小moon给自己的技术栈添加了一项，js模板引擎：mustache