骨幹設計查詢

我有一個Backbone視圖MainMenuView。 MainMenuModel有一個子模型ItemModel的數組。主菜單有兩頁，因此它有下一個上一個按鈕。第一頁有6個項目，第二頁有5個項目。現在我有兩種方法分別進入第一頁和第二頁。現在我正在App路由器中創建模型/子模型，並將其傳遞給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'); 
    }

來源

2014-01-30 webdev

下面是一個簡單的解決方案使用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();

附：這不是很好的解決方案，但我試圖告訴你如何使用收集和重用視圖。如果頁面數量增加，我會爲他們添加收藏。

編輯

這裏被重構版本多頁支持http://jsfiddle.net/gNa2h/2/

來源

2014-01-30 22:55:24

骨幹設計查詢

回答

相關問題