Лучшая практика для динамического плагина создания таблицы?

Question

Я работаю над плагином, который будет динамически создавать таблицы продуктов и добавлять их в div (или любые селекторы называют функцией плагина). Пока это работает, как и планировалось, но таблицы генерируются путем копирования HTML-шаблона, который жестко закодирован в представлении. Мой код длинный, так что я не собираюсь вставить все это, но это, по сути, как это (в самом общем виде и минус все таблицы логических функций):

(rowtemplate HTML)

$.fn.block = function(rows, maxrows) { 
    var productRows = $(this); 

    function createRows(rows) { 
     var rowHTML = $('.rowtemplate').html(); 
     for(var i = 1; i < rows + 1; i++) { 
      $('<tr class="productrow"></tr>').appendTo(productRows).append(rowHTML); 
     } 
    } 

    function createTable(rows) { 
     createRows(rows) 
     // bind table logic functions and other stuff 
     ...... 
    } 

    // bunch of other stuff, defining table logic functions 

    createTable(rows, maxrows); 
} 

Так в основном когда вы говорите («# div2»). block (5, 10), плагин берет 5 в виде строк и 10 в виде максимальных строк и передает их в createTable, который вызывает createRows и связывает функции для создания таблицы. Это, конечно, добавляется к # div2. Проблема в том, что функция createRows работает, используя приведенную выше строку rowtemplate html (которую я в основном сделал для тестирования). Это означает, что плагин, очевидно, не очень портативен, если вам нужно приносить шаблон с ним каждый раз. Так что я думаю, что есть три способа реализации HTML:

1. Написать шаблон HTML в поле зрения каждый раз, когда используется плагин (худший вариант ИМ, по причинам, которые я только что сказал)

2. жестко закодировать HTML-шаблон в плагин, чтобы он просто добавлялся до построения таблицы (только один раз)

3. Ссылка на внешний файл js, который добавляет его или ссылается на внешний html-файл, содержащий его (делает вещи более чистыми, а также добавляет внешняя файловая зависимость, которая является болью и делает плагин только применимым с внешним f Ile)

Я сильно склоняюсь к 2, но я не знаю, что другие разработчики, которые работали над подобными проектами сделали, так что я хотел бы знать, если есть другой вариант. Я не вижу, как может быть, потому что HTML должен быть во внешнем файле, в HTML-части представления или в Javascript ... поэтому логически я не могу думать об альтернативе, но приветствовал бы предложения.

Answer 1

На данный момент это расширение jQuery, а не плагин. если бы это был плагин, вы бы сделали HTML еще один вариант , переданный плагину, но предоставив шаблон по умолчанию в настройках по умолчанию.

Для вашего расширения, вы можете сделать это следующим образом (с использованием одного параметра опций):

$.fn.block = function(options) { 
    // Get the options or use the defaults 
    var html = options.html || "<div>my default html template</div>"; 
    var rows = options.rows || 5; 
    var maxrows = options.maxrows || 10; 

и назвать так:

$(selector).block({rows: 2, cols: 10, html: "<div>etc</div>"}); 

Примечание: Все параметры являются необязательный!

Другой вариант - передать селектор, который выбирает шаблон из элемента существующей страницы, поэтому он может быть как можно более сложным.Используя фиктивный блок сценария (с неизвестным типом поэтому игнорируется) отлично подходит для этого:

<script id="mythtml" type="text/template"> 
    <div>My template</div> 
</script> 

и назвать так:

$(selector).block({rows: 2, cols: 10, html: "#myhtml"}); 

и использовать так:

$.fn.block = function(options) { 
    var html = $(options.html).html(); 

снова это может использоваться по умолчанию, если вы предпочитаете:

$.fn.block = function(options) { 
    var html = $(options.html).html() || "<div>my default html template</div>"; 

Или, сочетающие обе идеи:

$.fn.block = function(options) { 
    // Get the options or use the defaults 
    var html = $(options.html).html() || "<div>my default html template</div>"; 

Тот же код будет работать с HTML-строкой или селектором :)