Memanggil fungsi dari kode pelat boiler plugin jquery

Saya telah menemukan plugin jQuery yang bagus dan menggunakan templat pelat ketel. Semuanya berfungsi dengan baik, tetapi saya tidak dapat menjalankan fungsi internal untuk mendapatkan item yang dipilih. Konstruksi plugin ini di bawah:

    (function ($, window, document) {
    'use strict';

    // constructor
    var SearchableOptionList = function ($element, options) {
        this.$originalElement = $element;
        this.options = options;

        this.metadata = this.$originalElement.data('sol-options');
    };

    // plugin prototype
    SearchableOptionList.prototype = {

        DATA_KEY: 'sol-element',

        // default option values
        defaults: {            
            ... 
        },

        // initialize the plugin
        init: function () {
            this.config = $.extend(true, {}, this.defaults, this.options, this.metadata);

            ...

            return this;
        },

        //some functions
        ...

        selectAll: function () {
            ...
        },

        deselectAll: function () {
            ...
        },

        getSelection: function () {
            return this.$selection.find('input:checked');
        }
    };

    // jquery plugin boiler plate code
    SearchableOptionList.defaults = SearchableOptionList.prototype.defaults;
    window.SearchableOptionList = SearchableOptionList;

    $.fn.searchableOptionList = function (options) {
        var result = [];
        this.each(function () {
            var $this = $(this),
                $alreadyInitializedSol = $this.data(SearchableOptionList.prototype.DATA_KEY);

            if ($alreadyInitializedSol) {
                result.push($alreadyInitializedSol);
            } else {
                var newSol = new SearchableOptionList($this, options);
                result.push(newSol);

                setTimeout(function() {
                    newSol.init();
                }, 0);
            }
        });

        if (result.length === 1) {
            return result[0];
        }

        return result;
    };

}(jQuery, window, document));

Kode lengkap dapat Anda temukan di GitHub.

Saya mencoba menjalankan fungsi getSelection seperti di bawah ini:

// initialize sol
    var s = $('#my-select').searchableOptionList({
        maxHeight: '150px',
        showSelectAll: true
    });

    s.selectAll();

Saya mendapatkan kesalahan:

TypeError: this.config is undefined

Apakah mungkin untuk menjalankan fungsi menggunakan templat pelat ketel ini?

Anda dapat bermain-main di jsfiddle


javascript jquery boilerplate jquery-plugins
person Nolesh    schedule 15.04.2016    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Saya yakin baris 1031 adalah pelakunya

        setTimeout(function() {
            newSol.init();
        }, 0);

Karena init ditangguhkan, kode tersebut belum siap saat Anda langsung memanggilnya. Perbaikan yang paling mudah adalah dengan menunda panggilan Anda juga, namun tidak ada jaminan bahwa panggilan tersebut akan diinisialisasi.

setTimeout(function(){s.selectAll()},1000);

Solusi yang lebih baik adalah dengan menggunakan events plugin untuk menghubungkan kapan itu telah diinisialisasi.

$('#my-select').searchableOptionList({
  maxHeight: '150px',
  events: {
    onInitialized: function() {
      this.selectAll();
    }
  }
});

biola

person Community    schedule 15.04.2016
comment
Terima kasih! Bisakah Anda menjelaskan mengapa penulis menggunakan setTimeout? Apakah itu perlu? - person Nolesh; 15.04.2016
comment
Saya kira itu karena plugin mengizinkan data jarak jauh sehingga memperlakukan semua data secara asinkron. - person ; 15.04.2016
comment
Jika saya tidak akan menggunakan data async, bisakah saya menghilangkannya? - person Nolesh; 15.04.2016
comment
Bisa saja, tapi tidak ada salahnya jika membiarkannya. Perhatikan bahwa ada satu tempat lain yang batas waktunya harus dihilangkan setTimeout(function () { sol._initializeData(); biola - person ; 15.04.2016
comment
Luar biasa! Sekarang berfungsi seperti yang saya harapkan. Terima kasih banyak atas bantuannya! Bagi yang tidak ingin menyimpan instance plugin dapat menggunakan $('#my-select').searchableOptionList().selectAll(); - person Nolesh; 15.04.2016