-1

我正在开发一个离线原型（html、css 和 js），我需要一个简单的机制，我可以将我的标记分成几个外部模板文件，以便更好地维护并使其可重用..

主要是这些外部模板不会有任何类型的数据模板，它只会包含静态 html，

我需要编写一个脚本，它将解析所有data-template-url属性，并将相应的模板文件加载到该 DOM 元素中，如果加载的模板有data-template-url，脚本也会这样做（无论我的嵌套模板有多少标记）

<div class="some-component" data-template-url="components/user-details.html">
    <!-- template content will be loaded here -->
</div>

我已经完成了以下脚本，它可以完成这项工作，但不处理嵌套模板

(function($){

    $(function(){

        var attr = 'data-template-url';

        $('[' + attr + ']').each(function(){
            var $self = $(this)
            ,   url = $self.attr(attr);

            $.get(url, function(data){
                $(data).appendTo($self);
            });
        });

    });
})(jQuery);

如果有人可以提供帮助，将不胜感激:)

4

1 回答 1

1

如果你想保持你的方法：

(function($){

    $(function(){

        var loadTemplates = function () {

            var 
                /* template url attribute */
                attr = 'data-template-url',
                /* load status attribute */
                state = 'data-template-state',
                /* load done value for status attribute */
                done = 'ready';

            /* for all elements with template url not in ready state */
            $('[' + attr + ']:not([' + state + '="' + done + '"])')
            .each(function () {

                /* fetch url */
                var url = $(this).attr(attr);

                /* load content and append */
                $(this).load(url, function () {

                    /* set state to ready */
                    $(this).attr(state, done);

                    /* do another run for nested templates */
                    loadTemplates();

                });

            });
        };

        /* start */
        loadTemplates();
    });

})(jQuery);
于 2012-06-14T07:52:21.333 回答