Javascript 使用Backbone.js管理基本接口状态的更好方法

我是Backbone.js的新手，我想知道对于我想要实现的目标是否有一些常见的实践。我的目标是管理应用程序中的一些基本UI状态

例如，跟踪正在打开或关闭的菜单：

(function() {
App.Models.Masthead = Backbone.Model.extend({
    defaults: {
        primaryNavClosed: true
    },

    togglePrimaryNavState: function() {
        this.set('primaryNavClosed', !this.get('primaryNavClosed'));
    }
});

App.Views.Masthead = Backbone.View.extend({
    el: '#masthead',
    initialize: function() {
        var model = this.model;
        this.primaryNav = this.$('#primary-nav');

        // Close the nav menu when anything outside of the menu is clicked.
        $("body").click(function() {
            model.set('primaryNavClosed', true);
        });
        // Do not close nav menu if the nav menu itself is clicked
        this.primaryNav.click(function() {
            return false;
        });

        this.listenTo(this.model, 'change:primaryNavClosed', this.render);
    },

    events: {
        'click #mobile-nav-hamburger': 'togglePrimaryNavState'
    },

    togglePrimaryNavState: function() {
        this.model.togglePrimaryNavState();
        // don't auto close the menu
        return false;
    },

    openPrimaryNav: function() {
        this.model.set('primaryNavClosed', false);
    },

    closePrimaryNav: function() {
        this.model.set('primaryNavClosed', true);
    },

    render: function() {
        if(this.model.get('primaryNavClosed')) {
            this.primaryNav.addClass('closed');
        } else {
            this.primaryNav.removeClass('closed');
        }
        return this;
    }
});
App.masthead = new App.Models.Masthead;
new App.Views.Masthead({ model: App.masthead });
})();

HTML供参考：

<div id="masthead">
<div class="banner">
    <a href="/"><span>Title</span></a>
</div>
<a href="#" id="mobile-nav-hamburger"></a>
<nav id="primary-nav" class="closed">
    <ul>
        <!-- nav items will go here eventually -->
    </ul>
</nav>
</div>

这是可行的，我只是觉得我做这件事的方式很糟糕。我很欣赏这样一个事实，即我可以从应用程序的其他部分更新模型中的数据，并且视图将自动做出相应的响应，而无需进行大量繁重的工作。。。即使是像在这种情况下显示导航菜单这样简单的东西

很难找到讨论这种行为的常见模式的文章，如果有任何关于如何改进的想法，我将不胜感激

---

提前谢谢

就我个人而言，我不会为模型操心，只会将状态直接存储在视图中

(function() {
App.Views.Masthead = Backbone.View.extend({
    el: '#masthead',
    initialize: function() {
        var view = this;
        this.primaryNavClosed = true;
        this.primaryNav = this.$('#primary-nav');

        // Close the nav menu when anything outside of the menu is clicked.
        $("body").click(function() {
            view.primaryNavClosed = true;
            view.render()
        });

        // Do not close nav menu if the nav menu itself is clicked
        this.primaryNav.click(function() {
            return false;
        });
    },

    events: {
        'click #mobile-nav-hamburger': 'togglePrimaryNavState'
    },

    togglePrimaryNavState: function() {
        this.primaryNavClosed = !this.primaryNavClosed;
        this.render();
    },

    openPrimaryNav: function() {
        this.primaryNavClosed = false;
        this.render()
    },

    closePrimaryNav: function() {
        this.primaryNavClosed = true;
        this.render();
    },

    render: function() {
        if(this.primaryNavClosed) {
            this.primaryNav.addClass('closed');
        } else {
            this.primaryNav.removeClass('closed');
        }
        return this;
    }
});
new App.Views.Masthead();
})();

也就是说，我不认为您实际上需要在特定情况下存储状态，因为状态所做的只是确定是否添加或删除CSS类-为什么不将其显式化

(function() {
App.Views.Masthead = Backbone.View.extend({
    el: '#masthead',
    initialize: function() {
        var view = this;
        this.primaryNav = this.$('#primary-nav');

        // Close the nav menu when anything outside of the menu is clicked.
        $("body").click(function() {
            view.closePrimaryNav();
        });

        // Do not close nav menu if the nav menu itself is clicked
        this.primaryNav.click(function() {
            return false;
        });
    },

    events: {
        'click #mobile-nav-hamburger': 'togglePrimaryNavState'
    },

    togglePrimaryNavState: function() {
        this.primaryNav.toggleClass( 'closed' );
    },

    openPrimaryNav: function() {
        this.primaryNav.removeClass( 'closed' );
    },

    closePrimaryNav: function() {
        this.primaryNav.addClass( 'closed' );
    }
});
new App.Views.Masthead();
})();

切换到

$（“body”）。单击（this.closePrimaryNav）

，这样您就可以

$（“body”）。关闭（'click'，this.closePrimaryNav）

，在

删除

覆盖中执行。