使用 Backbone.js 渲染排序菜单

发布于 2024-12-19 23:51:09 字数 366 浏览 0 评论 0原文

我正在使用 Backbone.js 来呈现项目列表。这是有效的，我有一个模型、集合和视图。

我想做的是有一个主导航和子导航为列表项提供排序选项。

主导航只有两个项目，因此我在页面上进行了硬编码。对于子导航，我想根据主导航选择动态渲染它。子导航项是静态的。

我设置了一个事件来观察 MainNav 项目何时发生变化：

events : {
    "click #items-main-nav" : "onNavMainClick"
},

我的问题是，在哪里定义两个 Main Nav 项目的子导航项目？以及如何渲染它们。这一切应该位于backbone.js 视图文件中的什么位置？

谢谢

原文

I'm using Backbone.js to render a list of items. THis is working, I have a model, collection and view.

What I want to do is have a Main Nav & Sub Nav which gives sorting options for the list items.

The Main nav is just two items so I have that hard coded on the page. For the sub nav, I would like to render that dynamically based on the Main Nav selection. The sub nav items are static.

I set an event to observe when the MainNav item changes:

events : {
    "click #items-main-nav" : "onNavMainClick"
},

My question is, where do I define the subnav items for the two Main Nav items? And how to I render them. And where should this all live in the backbone.js view file?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扬花落满肩 2024-12-26 23:51:09

您将拥有一个呈现 subNav 容器的视图，在 subNav 容器内，您将根据 MainNav 上选择的项目插入一个模板。我认为它应该如下所示......

var subNav = Backbone.View.extend({

  tagName: "div",

  events: {
    "click #items-main-nav" : "onNavMainClick"
  },

  onNavMainClick : function(event){
    //determine which item they clicked on the main nav
    //and call render with correct paramters
    render(option);
  },

  render: function(option) {

    $(this.el).html(option.template(this.model.toJSON()));
    return this;
  }

});

You will have one view that renders the subNav container, inside the subNav container you will insert a template depending on the item selected on the MainNav. I think it should look like the below....

var subNav = Backbone.View.extend({

  tagName: "div",

  events: {
    "click #items-main-nav" : "onNavMainClick"
  },

  onNavMainClick : function(event){
    //determine which item they clicked on the main nav
    //and call render with correct paramters
    render(option);
  },

  render: function(option) {

    $(this.el).html(option.template(this.model.toJSON()));
    return this;
  }

});

回复收藏 0 原文

~没有更多了~