javascript - JavaScript/jQuery/AJAX 中的嵌套模板

Question

我正在尝试完成一个我需要使用嵌套模板的模块，但我被困在如何做到这一点上。

我的 UI 基本上有 3 个级别，例如级别 1、级别 2、级别 3。因此，当页面显示时，我只需要呈现级别 1。但是，当用户单击 level1 的任何元素的“展开”按钮时，我需要在 level 1 的选定元素下方呈现 level 2 的相应元素(不是全部)。

现在，当用户点击 Level 2 的任何元素的“展开”时，应呈现相应的 Level 3..

总结起来应该就是Windows Explorer左边的导航栏吧!

Answer 1

通常，您应该为每个级别定义单独的组件，为每个组件分配模板并实现类似expand()/collapse() 方法。如果一个组件最初是折叠的(你的情况)，那么它不需要在初始化时呈现子项，它只会在你展开它们时呈现它们(将使用子组件的适当模板)。

请提供您正在尝试使用的基本代码，这样会更容易帮助您。

这是一个 Widget 系统的快速原型(prototype)，带有一个使用模板的简单渲染流程。我猜你想在你的应用程序中有类似的东西。它未经优化，它只是您的框架外观的一个想法。

/**
 * Widget constructor
 */
var Widget = function(config) {
    // apply config
    $.extend(this, config);
    // attempt to render
    this.render();
};

/**
 * Widget prototype
 */
$.extend(Widget.prototype, {
    // render target
    renderTo: null,
    // template
    tpl: '<div class="container-panel">' +
            '<p>${txt}</p>' +
            '<div class="items-container"></div>' +
        '</div>',
    // template data
    tplData: null,
    // child items array
    children: null,
    // initial collapsed state
    collapsed: false,
    // widget's root element
    el: null,
    // default render target selector for child items
    renderTarget: '.items-container',

    render: function() {
        var me = this,
            renderDom

        // render the widget
        if(!this.rendered && this.renderTo && this.tpl) {
            renderDom = $.tmpl(this.tpl, this.tplData);
            // assume that first element is widget's root element
            this.el = renderDom[0];
            $(this.renderTo).append(renderDom);

             // clear the reference
            renderDom = undefined;

            // THIS IS JUST EXAMPLE CODE! Bind click handler...
            $(this.el).find('p').first().click(function() {
                me.collapsed ? me.expand() : me.collapse();
            });    

            // find render target for children
            this.renderTarget = $(this.el).find(this.renderTarget).first();

            // render children if not collapsed
            this.renderChildren();

            // set rendered flag
            this.rendered = true;
        }
    },

    renderChildren: function() {
        var children = this.children;
        if(!this.collapsed && children && children.length) {
            for(var i = 0, len = children.length; i < len; i++) {
                // render children inside 
                children[i].renderTo = this.renderTarget;
                children[i].render();
            }
        }
    },

    /**
     * Expand template method. Override it.
     */   
    expand: function() {
        this.collapsed = false;
        this.renderChildren();
        this.renderTarget.show();
    },

    /**
     * Collapse template method. Override it.
     */    
    collapse: function() {
        this.collapsed = true;
        this.renderTarget.hide();
    }
});

在这里，我预先定义了模板，并对在小部件的第一个段落元素内单击时发生的展开/折叠逻辑进行了硬编码。

这是您使用小部件的方式:

// Using our widgets
var containerPanel = new Widget({
    tplData: {txt: 'Hello world!'},
    renderTo: $('body'),
    collapsed: true,
    children: [
        new Widget({
            tplData: {txt: '  Child 1'},
            collapsed: true,
            children: [
                new Widget({
                    tplData: {txt: '    Child 1.1'}
                }),
                new Widget({
                    tplData: {txt: '    Child 1.2'}
                }),
                new Widget({
                    tplData: {txt: '    Child 1.3'}
                })
            ]
        }),
        new Widget({
            tplData: {txt: '  Child 2'}
        })
    ]
});

您可以在 jsFiddle 上看到一个实例:http://jsfiddle.net/dipish/XDmWq/只需单击项目并查看动态生成的标记。

我认为代码是不言自明的，但请随时提出任何问题。请注意，代码使用 jQuery Templates Plugin但这只是为了方便。

如果您的 Web 应用程序中有许多复杂的组件，您可能希望使用比裸 jQuery 更严肃的东西，例如 ExtJS或 Dojo Toolkit .此类框架通常会为您提供方便的类系统和基础小部件/组件逻辑，以及许多其他内容。

祝你好运!