requirejs + django_select2

Question

我正在構建使用requirejs作爲js資產組合器的w// django應用程序，用於網站前端。

我使用它，因爲我曾經在一種JS依賴性地獄，沒有任何工作，因爲從不同Django應用程序加載的多個版本，相同的庫...（我甚至不知道如果這是一個很好的解決方案）

我要告訴我，我不是一個JS專家，我沒有圍繞我:( 我使用良好的舊模板來呈現網頁，而不是使用角，反應，防暴也不VUE：我是一個很老派的開發:)

我已經適應了一些腳本，以使用要求，但我堅持現在...

我已經安裝了django_select2應用程序，並且正在嘗試修改django_select2.js資源。

我已經加載選擇2至涼亭，我已經updaetd我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(); 
     }); 
    }($)); 
}); 

我m有一個不匹配的匿名定義（）當在瀏覽器中運行我的頁面時...

我真的不是JS專家，我編碼的試驗和錯誤...任何人都可以h幫我用這個？

謝謝！

Answer 1

OK，我有一個自動回覆...

我繼承的混入：

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(['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(); 
     }); 
    }($)); 
}); 

這一切，鄉親！