javascript - バックボーン フォーム - 配列によるレンダー オプション

Question

こんにちは、配列ベースの div-array の編集インターフェイスを作成したいと考えています。たとえば、ループで 15 div を作成し、

これに基づいて、これらの div の 1 つを選択してクラスを変更できる編集インターフェイスを ajax 経由でロードしたいので、手動でこれを行うことができます。

 var divs = {
        'selector': ['Select One'],
        'id': ['div-1', 'div-2', 'div-3', 'div-4'],
        'class': ['class-1', 'class-2', 'class-3', 'class-4']
    };

ポイントは、ユーザーが int を入力してレンダリングするまで、それらの数がわからないことです。id と class は、現在レンダリングされている div の量に基づいて入力する必要があります。次に例を示します。

現在のコード:

   (function($) {
    var container = $('.holder');

    //The input getter for amount of divs
    var form1 = new Backbone.Form({
        schema: {
            nDefine: 'Number',
        }
    }).render();
    $('.input').append(form1.el);

// rendering amount of divs
function render(){
    num = parseInt($('input').val());
    for(var i = 1; i <= num; i++) {
         container.append('<div id="id'+i+'" class="box category'+i+'">Id:'+i+'</div>');

     }
}

// renders divs on click
$('.n-definer').click(function() {

    container.empty();
    render();
    //form1.commit();
});

})(jQuery);

これで問題なく動作します。これらの ID とクラスを配列形式でバックボーン フォームに選択するにはどうすればよいですか?