Магистральный запрос на проектирование

Question

У меня есть один вид основной линии MainMenuView. MainMenuModel имеет массив подмодулей ItemModel. Главное меню состоит из двух страниц, поэтому у него есть следующие предыдущие кнопки. Первая страница имеет 6 предметов, а вторая страница содержит 5 предметов. Прямо сейчас у меня есть два метода в маршрутизаторе, чтобы перейти на первую и вторую страницу соответственно. На данный момент я создаю модель/подмодули в маршрутизаторе приложений и передаю это для рендеринга метода MainMenuView. Также, когда я нахожусь на второй странице, я хочу отключить следующую кнопку и включить предыдущую кнопку. Аналогично переключению кнопок на первой странице. Также есть события кликов. Я определил помощника для привязки этих событий и переключения состояния кнопок. Его работа, но не выглядит хорошо для меня. Поэтому хотелось спросить, есть ли лучший способ повторного использования одного и того же представления.

var MainMenuModel = Backbone.Model.extend({ 
     defaults: { 
      menuItems: [] 
     } 
}) 


var MenuItemModel = Backbone.Model.extend({ 
     defaults: { 
      title: '' 
     } 
}) 


var MainMenuView = Backbone.View.extend({ 

     render: function(){ 
      //_.template stuff goes here 
     } 

}) 


var App = Backbone.Router.extend({ 


    goToFirstPage: function(){ 
    MenuItemModel item1 = new MenuItemModel({title: "One"}); 
    MenuItemModel item2 = new MenuItemModel({title: "Two"}); 
    MenuItemModel item3 = new MenuItemModel({title: "Three"}); 
     MainMenuModel model = new MainMenuModel({menuItems: [item1, item2, item3]}); 

    } 

    goToSecondPage: function(){ 
    MenuItemModel item4 = new MenuItemModel({title: "Four"}); 
    MenuItemModel item5 = new MenuItemModel({title: "Five"}); 
     MainMenuModel model = new MainMenuModel({menuItems: [item4, item5]}); 

    } 


}) 

//some helper methods: 

function bindEventsForFirstPage(){ 

     $("#prev").off('click'); 
     $("#prev").addClass('prev-disabled'); 
     $("#next").click(goToFirstPage); 
    } 

function bindEventsForSecondPage(){ 
     $("#prev").click(goToSecondPage); 
     $("#next").off('click'); 
     $("#next").addClass('next-disabled'); 
    } 

Answer 1

Ниже простое решение использовать Backbone.Collection вместо MainMenuModel и использовать вид внутри Router

А вот рабочий пример http://jsfiddle.net/gNa2h/

HTML

<script type="x/template" id="template"> 
    <ul> 
     <% _.each(items, function(item) { %> 
      <li> 
       <%= item.title %> 
      </li> 
     <% }); %> 
    </ul> 

    <a id="prev" href="#" class="<% if (page === 1) { %>prev-disabled<% } %>">Prev</a> 
    <a id="next" href="#" class="<% if (page === 2) { %>next-disabled<% } %>">Next</a> 
</script> 

<div id="menu"></div> 

CSS

.prev-disabled, .next-disabled { 
    color: #ccc; 
} 

JavaScript

var MenuItemModel = Backbone.Model.extend({ 
    defaults: { 
     title: '' 
    } 
}); 


var MainMenuCollection = Backbone.Collection.extend({ 
    model: MenuItemModel 
}); 


var MainMenuView = Backbone.View.extend({ 

    el: '#menu', 

    template: _.template($("#template").html()), 

    events: { 
     'click #prev': 'onClickPrev', 
     'click #next': 'onClickNext' 
    }, 

    initialize: function(options) { 
     this.page = options.page; 
     this.render(); 
    }, 

    onClickPrev: function(e) { 
     e.preventDefault(); 
     if ($(e.currentTarget).hasClass("prev-disabled")) { 
      return false; 
     } 
     app.goToFirstPage(); 
    }, 

    onClickNext: function(e) { 
     e.preventDefault(); 
     if ($(e.currentTarget).hasClass("next-disabled")) { 
      return false; 
     } 
     app.goToSecondPage(); 
    }, 

    render: function() { 
     this.$el.html(this.template({ 
      page: this.page, 
      items: this.collection.toJSON() 
     })); 
    } 
}); 


var App = Backbone.Router.extend({ 

    goToFirstPage: function() { 
     var collection = new MainMenuCollection([ 
      { title: "One" }, 
      { title: "Two" }, 
      { title: "Three "} 
     ]); 

     this.view && this.view.undelegateEvents(); 

     this.view = new MainMenuView({ 
      page: 1, 
      collection: collection 
     }); 
    }, 

    goToSecondPage: function() { 
     var collection = new MainMenuCollection([ 
      { title: "Four" }, 
      { title: "Five "} 
     ]); 

     this.view && this.view.undelegateEvents(); 

     this.view = new MainMenuView({ 
      page: 2, 
      collection: collection 
     });   
    } 

}); 

var app = new App(); 

app.goToFirstPage(); 

P.S. это не очень хорошее решение, но я просто попытался показать вам, как вы можете использовать просмотр коллекции и повторного использования. Если количество страниц будет расти, я бы добавил для них коллекцию.

Редактировать

А вот переработан версия с поддержкой нескольких страниц http://jsfiddle.net/gNa2h/2/