multiselect treeview в позвоночнике

Question

Я новичок в позвоночнике и пытаюсь установить некоторые хорошие парадигмы.

Прямо сейчас, я работаю над поиском тяжелого сайта. Есть десятки атрибутов для поиска, многие из них являются минимальным типом, но 6 или около того - несколько. До позвоночника я использовал что-то под названием listtree, чтобы создать сворачиваемую listtree для параметров multiselect. Я все еще буду использовать эти классы css, но теперь я пытаюсь использовать магистраль с моделями и представлениями. TBH, это похоже на большую работу, чем просто использование прямого jquery, поэтому, возможно, я что-то упустил.

Мой вопрос в том, как мне структурировать модели и представления для нескольких видов виджетов в виде дерева?

Вот код, который я до сих пор:

<script type='text/template' id='listtree_bs'> 
<div class="listtree"> 
    <ul> 
     <% _.each(context, function(element, index){ %> 
     <li> 
      <span> 
       <input class="checkbox-listview-master" type="checkbox" value="<%= element.value %>"><%= element.name %><i class="glyphicon glyphicon-chevron-up"></i> 
      </span> 
      <ul style="display: none;"> 
       <% _.each(element.items, function(childelement, index){ %> 
       <li> 
        <span> 
         <input class="checkbox-listview-master" type="checkbox" value="<%= childelement.value %>"><%= childelement.name %><i class="glyphicon glyphicon-chevron-up"></i> 
        </span> 
       </li> 
       <% }); %> 
      </ul> 
     </li> 
     <% }); %> 
    </ul> 
</div> 
</script> 



var ListTreeModel = Backbone.Model.extend({ 
    urlRoot: "/search/multiselect/", 
    idAttribute:'value', 
}); 

var ListTreeModels = Backbone.Collection.extend({ 
    model: ListTreeModel, 
    url: "/search/multiselect/", 
    parse: function (response) { 
     return response.data; 
    } 
}); 

var listtreemodels = new ListTreeModels(); 
listtreemodels.fetch() 

var ListTreeView = Backbone.View.extend({ 
    events: { 
     "treechecked": "treechecked" 
    }, 
    treechecked: function(e){ 
     console.log('triggered'); 

}); 

var listtreeview = new ListTreeView({el: $('#listtree_bs')}); 

response.data сверху выглядит вроде как это (я могу легко изменить бэкенд, хотя для облегчения переднего конца)

{ 
    "data": [ 
    { 
     "other": 0, 
     "values": [ 
     { 
      "value": 1, 
      "key": "type (35513)" 
     } 
     ], 
     "value": "type_of_code", 
     "key": "C Type", 
     "missing": 275793 
    }, 
    { 
     "other": 25273, 
     "values": [ 
     { 
      "value": 41, 
      "key": "United States of America (187293)" 
     } 
     ], 
     "value": "primary_country_id", 
     "key": "Primary Country", 
     "missing": 3475 
    }, 
    { 
     "other": 10958, 
     "values": [ 
     { 
      "value": 623, 
      "key": "company 623 (12602)" 
     } 
     ], 
     "value": "controller_id", 
     "key": "Search by Controller", 
     "missing": 248288 
    }, 
    { 
     "other": 1294, 
     "values": [ 
     { 
      "value": 6, 
      "key": "animal type (247267)" 
     }, 
     { 
      "value": 7, 
      "key": "animal type y (23315)" 
     } 
     ], 
     "value": "animal_id", 
     "key": "Animals", 
     "missing": 0 
    }, 
    { 
     "other": 0, 
     "values": [ 
     { 
      "value": 5, 
      "key": "Inactive (63693)" 
     }, 
     { 
      "value": 1, 
      "key": "Active (825)" 
     } 
     ], 
     "value": "current_status_code_table_id", 
     "key": "Current Status", 
     "missing": 109101 
    }, 
    { 
     "other": 0, 
     "values": [ 
     { 
      "value": 0, 
      "key": "stuff (275058)" 
     }, 
     { 
      "value": 1, 
      "key": "more stuff (39860)" 
     }, 
     { 
      "value": 2, 
      "key": "even more stuff (668)" 
     } 
     ], 
     "value": "stuff_indicator", 
     "key": "Stuff Indicator", 
     "missing": 0 
    } 
    ] 
} 

Так что сейчас модели заполняются на уровне данных, но должны ли они заполняться на вложенном уровне и управлять этим с помощью отношений от одного до многих?

Что эти мультиселекты заполняют форму поиска, которая будет отправляться обратно на сервер, когда пользователь нажимает на поиск. Могу ли я привязать вышеуказанные представления к модели, даже если они вложены?

Я пытаюсь создать основу в качестве эксперимента здесь, но является ли это тем, для чего он был действительно предназначен? Результаты поиска сложны и нарезаны десятками просмотров. Я надеялся использовать позвоночник, чтобы держать дом легким и ловким. Прямо сейчас он завязывается во многих обратных вызовах событий и просто много html.

Answer 1

Настройка иерархии моделей не так уж трудна: вам просто нужно создавать свои подмодели при анализе данных. Один из способов сделать это является

var ListTreeModel = Backbone.Model.extend({ 
    urlRoot: "/search/multiselect/", 
    idAttribute:'value', 

    constructor: function(data, opts) { 
     // force the parsing of the data 
     opts = _.extend({}, opts, {parse: true}); 

     // setup the children collection 
     this.values = new ListTreeModels(); 

     // call the parent constructor 
     Backbone.Model.call(this, data, opts); 
    }, 
    parse: function(data) { 
     // populate the children 
     if (_.isArray(data.values)) 
      this.values.set(data.values); 

     // remove the children from th emodel attributes 
     return _.omit(data, 'values'); 
    } 
}); 

var ListTreeModels = Backbone.Collection.extend({ 
    model: ListTreeModel, 
    url: "/search/multiselect/", 
    parse: function (response) { 
     return response.data; 
    } 
}); 

Демонстрационный показывающий результат http://jsfiddle.net/nikoshr/pZU5J/

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

var ListTreeView = Backbone.View.extend({ 
    'tagName': 'ul', 
    render: function() { 
     var $el = this.$el; 
     //create a view for each model 
     this.collection.each(function(model) { 
      var view = new ListItemView({ 
       model: model 
      }); 
      $el.append(view.render().el); 
     });   
     return this; 
    } 
}); 
var ListItemView = Backbone.View.extend({ 
    'tagName': 'li', 
    events: { 
     'click ': function(e) { 
      e.stopPropagation(); // avoid triggering an event on the parent level 
      console.log(this.model.get('value')); 
     } 
    }, 
    render: function() { 
     //render the node 
     var template = _.template($('#listitem').html()); 
     this.$el.html(template(this.model.toJSON())); 

     //and add a view for the sub collection    
     var subview = new ListTreeView({ 
      collection: this.model.values 
     }); 
     this.$el.append(subview.render().el); 
     return this; 
    } 
}); 

с listitem шаблона определяется как

<script type='text/template' id='listitem'> 
<span> 
    <input class="checkbox-listview" type="checkbox" value="<%= value %>"> <%= key %> 
</span> 
</script> 

и демо http://jsfiddle.net/nikoshr/pZU5J/3/

иерархического представления могут быть хитрым, чтобы сделать, вы, вероятно, придется расследуйте далее по этому вопросу.