Question

我有使用Slim的骨干，我需要从一个集合中创建一个手风琴菜单。 json文件看起来像这样。由于许多数据，文件只是一个例子而不是整个数据。每个主题都是Moduls，Subjects。

[{
"modulnummer":"7500",
"semester":"5",
"liste":"GI",
"bezeichnung":"2D-Bildanalyse"
},
{"modulnummer":"7720",
"semester":"5",
"liste":"GI",
"bezeichnung":"3D-Animation"
},
{"modulnummer":"7100",
"semester":"5",
"liste":"MI",
"bezeichnung":"3D-Modellierung und Animation"
},
{
"modulnummer":"7510",
"semester":"5",
"liste":"GI",
"bezeichnung":"Advanced Networking"
},
{
"modulnummer":"2110",
"semester":"2",
"liste":"-",
"bezeichnung":"Algorithmen und Datenstrukturen"
},
{
"modulnummer":"1340",
"semester":"1",
"liste":"-",
"bezeichnung":"Analysis"
},
{
"modulnummer":"3250",
"semester":"3",
"liste":"-",
"bezeichnung":"Animation"
},
{
"modulnummer":"7520",
"semester":"5",
"liste":"GI",
"bezeichnung":"Anwendung der k\u00fcnstlichen Intelligenz"
},
{
"modulnummer":"7110",
"semester":"5",
"liste":"MI",
"bezeichnung":"Ausgew\u00e4hlte Kapitel der angewandten Informatik"
},
{
"modulnummer":"2120",
"semester":"2",
"liste":"-","bezeichnung":"Auszeichnungssprachen"
},
{
"modulnummer":"2130",
"semester":"2",
"liste":"-",
"bezeichnung":"Programmieren 2"
},
{
"modulnummer":"3110",
"semester":"5",
"liste":"MI",
"bezeichnung":"Automatentheorie und Formale Sprachen"
}]

我想要一个这样的菜单：

<ul>
   <li><a href='#'><span>Semester 1,3,5</span></a>
      <ul>
         <li><a href='#'><span>Semester 1</span></a>
             <ul>
                <li><a href='#'><span>Modul 1</span></a></li>
                <li><a href='#'><span>Modul 2</span></a></li>
                <li><a href='#'><span>Modul ...</span></a></li>
             </ul>
         </li>
         <li><a href='#'><span>Semester 3</span></a>...</li>
         <li><a href='#'><span>Semester 5</span></a>...</li>
      </ul>
   </li>
   <li><a href='#'><span>Semester 2,4,5</span></a>
      <ul>
         <li><a href='#'><span>Semester 2</span></a>
             <ul>
                <li><a href='#'><span>Modul 1</span></a></li>
                <li><a href='#'><span>Modul 2</span></a></li>
                <li><a href='#'><span>Modul ...</span></a></li>
             </ul>
         </li>
         <li><a href='#'><span>Semester 3</span></a>...</li>
         <li><a href='#'><span>Semester 5</span></a>...</li>
      </ul>
   </li>
   <li><a href='#'><span>Elective Modul</span></a>
      <ul>
         <li><a href='#'><span>List G</span></a>
             <ul>
                <li><a href='#'><span>Modul 1</span></a></li>
                <li><a href='#'><span>Modul 2</span></a></li>
                <li><a href='#'><span>Modul ...</span></a></li>
             </ul>
         </li>
         <li><a href='#'><span>List MI</span></a>...</li>
      </ul>
   </li>
</ul>

我试图构建不同的json文件，过滤集合，我甚至试图在渲染过程中解决视图中的这个问题。但我的解决方案没有奏效。我需要过滤学期1,3,5，所以奇数比偶数（2,4,6），然后一次有一个听音值（GI，MI）。我怎么能这样做而不会迷路？或者更好的是什么是最好的方法？过滤集合？为每个学期实施不同的观点？我在这方面有点迷失。

我的工作：

window.NavListView = Backbone.View.extend({

    tagName : 'ul',

    render : function(eventName) {
        _.each(this.model.models, function(modul) {
            $(this.el).append(new NavListItemView({
                model : modul
            }).render().el);
        }, this);
        return this;
    },
    close : function() {
        $(this.el).unbind();
        $(this.el).remove();
    }
});

window.NavListItemView = Backbone.View.extend({

    tagName : "li",

    template : _.template($('#tpl-nav-list-item').html()),

    render : function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

    close : function() {
        $(this.el).unbind();
        $(this.el).remove();
    }
});

window.NavView = Backbone.View.extend({

    template : _.template($('#nav-item-template').html()),

    initialize : function() {
        this.model.bind("change", this.render);

    },

    render : function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },
    close : function() {
        $(this.el).unbind();
        $(this.el).empty();
    }
});

路由器

routes : {
            '' : 'home',
            "*path" : "notFound"

        },
        home : function() {
            if (!this.navList) {
                this.navList = new NavCollection();
                var self = this;
                this.navList.fetch({
                    success : function() {
                        self.navListView = new NavListView({
                            model : self.navList
                        });

                        // changeView fuer header schreiben TODO

                        $('header').append(self.navListView.render().el);
                        // console.log(self.navList);
                    }
                });
            };
        },

和模板

<script type="text/template" id="tpl-nav-list-item">
    <a class="pagechange" title="<%- bezeichnung %>" href='#module/<%- modulnummer %>'><%- bezeichnung %></a>
</script>

和模型

window.Nav = Backbone.Model.extend({
    urlRoot : "../api/menuitems",


    defaults : {
        "bezeichnung" : "",
        "modulnummer" : "",
        "semester" : "",
        "liste" : ""
    },
});

window.NavCollection = Backbone.Collection.extend({
    model : Nav,
    url : "../api/menuitems",

});

Answer 1

您在客户端可以做的是在您的收藏中添加过滤器，按照奇数/偶数学期编号进行过滤

MyModules = Backbone.Collection.extend({
   // other functions ...
   even: function() {
        return this.filter(function( modul) { return modul.get('semester') % 2;});
   }
});

然后通过

获得所需的所有模块

modules = new MyModules();  
// fetch data from somewhere ...  
modules.even();

如果您可以更改json数据结构的服务器端生成，则可以按照您需要的方式返回嵌套结构。有一个可以处理嵌套属性的主干扩展DeepModel。

由于属性，骨干分割集合

1 个答案: