Question

我有一个Backbone视图MainMenuView。 MainMenuModel有一个子模型ItemModel数组。主菜单有两个页面，因此它有下一个按钮。第一页有6个项目，第二页有5个项目。现在我在路由器中有两种方法分别转到第一页和第二页。现在我在App路由器中创建模型/子模型，并将其传递给MainMenuView的render方法。此外，当我在第二页时，我想禁用下一个按钮并启用上一个按钮。同样切换第一页上的按钮。还有点击事件。我已经定义了一个帮助器来绑定这些事件并切换按钮的状态。它的工作但对我来说并不好看。所以想问一下是否有更好的方法可以重用相同的视图。

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/

骨干设计查询

1 个答案: