Question

我构建了一个JQuery组件来制作一个dropdown-accordion元素。每当我点击手风琴中的一个项目时，它将保存选择，关闭此手风琴并打开下一个如果存在。

要添加数据，它的工作原理如下：

$(window).ready(function () {
    $(selector).data('dropdownaccordion').enqueueAccordion({ // Ajax parameter
            name: "Commune",
            data: {
                url: "/trends/list",
                method: 'GET',
                datatype: "json",
                timeout: 5000
            }
        },
        {
            name: "Batiment",
            data: {
                url: "/trends/list/"+this.path[0], // this.path[0] refer to the first selection, as this.path[1] will refer to the second etc
                method: 'GET',
                datatype: "json",
                timeout: 5000
            }
        },
        { //Note that we can pass array instead of Ajax parameter
            name: "Dummy",
            data: ["One", "Two", "Three"]
        })
});

我设计的组件与Rest API一起使用。

我添加的第二个元素暴露了这个问题。如您所见，我正在尝试传递this.path [0]，参考选择的第一个项目。但是属性路径不存在于$（windows）.ready范围内，而是存在于$（selector）.data（'dropdownaccordion'）范围内。

我可以用$(selector).data('dropdownaccordion').path[0]替换它，但我想要一些更全局化的东西，比如ExpressJS在URL（http://www.dummy.com/path/:item1/:item2中做并通过用户选择替换：itemx）

你知道一个更好的解决方案，如果没有，你知道一种方法可以做到更好吗？

修改

我的组件设计如下：

+function ($) {
    'use strict';
    /**
     * Dropdown_Accordion CLASS DEFINITION
     */
    function DropdownAccordion(component, ...accordions) {
        this.accordions = [];

        for(var i=0;i<accordions.length;i++){
            this.accordions.push(accordions[i])
        }

        ...
        this.component = $(component);

        ...
        // Render the accordions as DOM
        this.render.call(this);

        //Events
        this.component
            .on("click", ".accordion-item-body", $.proxy(function(event){
                this.path.push($(event.target).text())
                this.component.trigger('click.selection.dropdownaccordion', [$(event.target)])
                this.openNext(event);
            }, this))
            .on('show.bs.dropdown', $.proxy(this.showMenu, this))
            .on('shown.bs.dropdown', $.proxy(this.openNext, this))
            .on('hide.bs.dropdown', $.proxy(function (event) {
                this.component.find('.dropdown-menu').first().stop(true, true).slideUp();
                this.component.find(".accordion-item .panel-collapse.collapse").each(function(){
                    $(this).collapse('hide');
                });
                this.opened = null;
                (this.path.length !== this.accordions.length) ? this.component.trigger("abort.selection.dropdownaccordion", [this.path]):null
                this.path = []
            }, this));
    }

    DropdownAccordion.prototype = {
        constructor: DropdownAccordion,
        // Collapse accordion every time dropdown is shown
        showMenu: function () {
            // show the accordion
        },

        openNext: function (clickEvent) {
           // Open the next accordion
        },

        render: function () {
            // Will render the dropdown-accordion
            // The following is how the AJAX request is performed
            ...
            // When the accordion is opened, make the ajax request
            DOMaccordion.on("open.accordion.dropdownaccordion", function () {
                    // The DOM element contains in data the options for the ajax request, or nothing if the accordion is an array    
                    **$.ajax($(this).data('content.accordion.dropdownaccordion'))** 

            });
            ...
            }
        },
        enqueueAccordion: function (...accordions) {
            for(var i=0; i<accordions.length;i++)
                this.accordions.push(accordions[i]);
            this.render()
        },

        dequeueAccordion: function (name) {
            this.accordions = this.accordions.filter(function (obj) {
                return obj.name !== name;
            })
            this.render()
        }
    }

查看代码中的** **，这是存储Ajax选项的地方。我希望当我点击一个项目时，.url上有一个替换，包括点击的第一个项目。

我希望这对你来说更清楚。

Answer 1

您可以让enqueueAccordion接受回调并将当前的手风琴作为参数传递：

DropdownAccordion.prototype = {
    // ...
    enqueueAccordion: function (makeAccordions) {
        var accordions = makeAccordions(this);

        for (var i = 0; i < accordions.length; i++)
            this.accordions.push(accordions[i]);
        this.render();
    }
}

$(selector).data('dropdownaccordion').enqueueAccordion(function (_this) {
    return [
        {
            name: "Batiment",
            data: {
                url: "/trends/list/" + _this.path[0],
                method: 'GET',
                datatype: "json",
                timeout: 5000
        }
    ];
});

如果您想直接使用this，可以暂时将回调附加到当前的手风琴：

DropdownAccordion.prototype = {
    // ...
    enqueueAccordion: function (makeAccordions) {
        this.makeAccordions = makeAccordions;
        var accordions = this.makeAccordions();
        delete this.makeAccordions;

        for (var i = 0; i < accordions.length; i++)
            this.accordions.push(accordions[i]);
        this.render();
    }
}

$(selector).data('dropdownaccordion').enqueueAccordion(function () {
    return [ // Ajax parameters
        {
            name: "Batiment",
            data: {
                url: "/trends/list/" + this.path[0],
                method: 'GET',
                datatype: "json",
                timeout: 5000
            }
        }
    ];
});

Answer 2

我挖掘了expressjs代码，并找到了他们如何进行URL替换。它与path-to-regex模块一起使用。它似乎不是为了浏览器开发的，所以我必须找到另一个解决方案。

@aaron启发了我，我终于添加了回调代替网址的可能性：

{
            name: "Capteur",
            data: {
                url: function (path) {
                    return "/trends/list/" + path[0] + "/" + path[1]
                },
                method: 'GET',
                datatype: "json",
                timeout: 5000
            }
        }

通过这样做，人们现在可以根据之前的选择修改路径。

进化字符串替换

修改

2 个答案: