Question

我正在使用requirejs作为js资产合并器为网站前端构建一个wagtail / django应用程序。

我正在使用它，因为我曾经遇到过一种JS依赖地狱，因为从不同的django应用程序加载了相同的lib的多个版本，所以没有任何作用...（我甚至不知道它是否是一个很好的解决方案）

我要告诉我，我不是JS专家，而且我没有任何关注我:( 我正在使用好的旧模板来渲染页面，而不是使用角度，反应，骚乱或vue：我是一个非常古老的学校开发人员：）

我已经调整了一些脚本来使用require，但我现在卡住了......

我已经安装了django_select2应用程序，我正在尝试调整django_select2.js资产。

我已经通过bower加载了select2，并且我已经更新了我的config.js：

"shim": {
    select2: {
            deps: ["jquery"],
            exports: "$.fn.select2"
    }
}, 
paths: {
    ...
    select2: "select2/dist/js/select2"
}

然后我正在尝试调整django_select2.js：

require(['jquery', 'select2'], function ($, select2) {
   return (function ($) {
        var init = function ($element, options) {
            $element.select2(options);
        };

        var initHeavy = function ($element, options) {
            var settings = $.extend({
                ajax: {
                    data: function (params) {
                        var result = {
                            term: params.term,
                            page: params.page,
                            field_id: $element.data('field_id')
                        }

                        var dependentFields = $element.data('select2-dependent-fields')
                        if (dependentFields) {
                            dependentFields = dependentFields.trim().split(/\s+/)
                            $.each(dependentFields, function (i, dependentField) {
                                result[dependentField] = $('[name=' + dependentField + ']', $element.closest('form')).val()
                            })
                        }

                        return result
                    },
                    processResults: function (data, page) {
                        return {
                            results: data.results,
                            pagination: {
                                more: data.more
                            }
                        }
                    }
                }
            }, options);

            $element.select2(settings);
        };

        $.fn.djangoSelect2 = function (options) {
            var settings = $.extend({}, options);
            $.each(this, function (i, element) {
                var $element = $(element);
                if ($element.hasClass('django-select2-heavy')) {
                    initHeavy($element, settings);
                } else {
                    init($element, settings);
                }
            });
            return this;
        };

        $(function () {
            $('.django-select2').djangoSelect2();
        });
    }($));
});

我在浏览器中运行我的页面时遇到不匹配的匿名定义（） ...

我真的不是JS专家，我是通过反复试验编码的......有人可以帮我解决这个问题吗？

谢谢！

Answer 1

好的，我有自动回复......

我继承了mixin：

class _Select2Mixin(Select2Mixin):
    def _get_media(self):
        """
        Construct Media as a dynamic property.

        .. Note:: For more information visit
            https://docs.djangoproject.com/en/1.8/topics/forms/media/#media-as-a-dynamic-property
        """
        return forms.Media(js=('django_select2/django_select2.js', ),
                           css={'screen': (settings.SELECT2_CSS,)})

    media = property(_get_media)


class _Select2MultipleWidget(_Select2Mixin, forms.SelectMultiple):
    pass

然后我可以使用小部件：

    class DocumentationSearchForm(forms.Form):
        ...
        document_domains = forms.ModelMultipleChoiceField(required=False,
                                                      label=_('Document domains'),
                                                      queryset=NotImplemented,
                                                      widget=_Select2MultipleWidget)

我已将config.js文件设置为路径：

requirejs.config({
    paths: {
        jquery: 'jquery/dist/jquery',
        select2: "select2/dist/js"
    }, 
    shim: {
        "select2/select2": {
            deps: ["jquery"],
            exports: "$.fn.select2"
        }
    }
});

然后我重写了django_select2.js文件，将内容包装在require语句中：

require(['jquery', 'select2/select2'], function ($) {
   (function ($) {
        var init = function ($element, options) {
            $element.select2(options);
        };

        var initHeavy = function ($element, options) {
            var settings = $.extend({
                ajax: {
                    data: function (params) {
                        var result = {
                            term: params.term,
                            page: params.page,
                            field_id: $element.data('field_id')
                        }

                        var dependentFields = $element.data('select2-dependent-fields')
                        if (dependentFields) {
                            dependentFields = dependentFields.trim().split(/\s+/)
                            $.each(dependentFields, function (i, dependentField) {
                                result[dependentField] = $('[name=' + dependentField + ']', $element.closest('form')).val()
                            })
                        }

                        return result
                    },
                    processResults: function (data, page) {
                        return {
                            results: data.results,
                            pagination: {
                                more: data.more
                            }
                        }
                    }
                }
            }, options);

            $element.select2(settings);
        };

        $.fn.djangoSelect2 = function (options) {
            var settings = $.extend({}, options);
            $.each(this, function (i, element) {
                var $element = $(element);
                if ($element.hasClass('django-select2-heavy')) {
                    initHeavy($element, settings);
                } else {
                    init($element, settings);
                }
            });
            return this;
        };

        $(function () {
            $('.django-select2').djangoSelect2();
        });
    }($));
});

这就是全部，伙计们！

requirejs + django_select2

1 个答案: