Question

我有一系列带过滤器的商品。过滤器基于几个复选框应用。如果用户选择不同的月份（项目被刷新），则项目集合会发生变化。

我的方法是循环每个项目，然后如果项目是匹配显示项目，则将过滤器应用于项目。此方法适用于加载期间的当前月份，但是当选择另一个月时，将执行循环，如果评估为false的条件，则仍会执行该条件。我知道条件是错误的，因为当我在控制台中看到的条件上放置一个断点时，语句的计算结果为false。即使是假的，下一步也会进入状态。

这是代码。

render: function() {
                display = this.model.get('display');
                filters = this.model.get('filters');


                //Check each class for filter parameters
                items.forEach(function (cla) {

                    //reset all items
                    $("#" + cla.id).parent().removeClass('matches');
                    $("#" + cla.id).parent().removeClass('noMatches');


                    //Get all filters
                    var hasCredit = "credits";
                    var hasLocation = "location";
                    var hasStarttime = "starttime";
                    var hasAreaOfStudy = "areaOfStudy";
                    var hasSpecialty = "specialty";
                    var hasEventCode = "eventcode";
                    var hasFormat = "format";
                    var itemFilters = [];

                    if (filters.inputs.length == 0) {
                        $("#" + cla.id).parent().addClass('matches');
                    } else {
                        //Loop over each filter
                        filters.inputs.forEach(function (el) {


                            //Check credit filter
                            if (el.name == 'credits') {
                                if (cla.credits.trim() == el.value) {
                                    itemFilters.push(hasCredit);
                                }
                            } else if (el.name == 'specialty') {
                                if (jQuery.inArray(el.value.trim(), cla.specialty) !== -1) {
                                    itemFilters.push(hasSpecialty);
                                }
                            } else if (el.name == 'areaOfStudy') {
                                if (jQuery.inArray(el.value, cla.areaOfStudy) !== -1) {
                                    itemFilters.push(hasAreaOfStudy);
                                }

                            } else if (el.name == 'starttime') {
                                if (cla.starttime.trim() == el.value) {
                                    itemFilters.push(hasStarttime);
                                }
                            } else if (el.name == 'location') {
                                if (cla.location.trim() == el.value) {
                                    itemFilters.push(hasLocation);
                                }
                            } else if (el.name == 'eventcode') {
                                if (cla.id.trim() == el.value.trim()) {
                                    itemFilters.push(hasEventCode);
                                }
                            } else if (el.name == 'format') {
                                if (cla.format == el.value) {
                                    itemFilters.push(hasFormat);
                                }
                            }
                        });

                        var isInputFilterMatch = applyInputFilter(filters.inputs, itemFilters);

                        //All non matching filters get a noMatch css classed applied to be hidden
                        if (isInputFilterMatch) {
                            $("#" + cla.id).parent().addClass('matches');
                        } else {
                            $("#" + cla.id).parent().addClass('noMatches');
                        }
                    }

                });

                //Hide and show all matches and non matches
                $('.noMatches').hide();
                $('.matches').show();

                $('#main_main_MainContent_CpeCalendar').parent('.hidden-results').show();

                // shifted over to apply this after the items are set
                jQuery_1_4_2(".modal[href], .modal a[href]").colorbox();

                return this;    
            }

Answer 1

我认为总体来说有更好的方法可以实施，但我会采取措施回答你的问题。

首先，此代码似乎是View的渲染方法的一部分。由于您还没有从View，Collection或Model中提供任何其他代码，因此我会问您是否正确地将视图重新绑定到集合中的更新数据？如果没有，那么基于你提供的这段代码，我想你可能不得不重新渲染视图，以便在每月更改时正确地将所有数据/事件绑定加载到集合数据上，因为它可能是迷路了：

$('#main_main_MainContent_CpeCalendar').parent('.hidden-results').show();

// shifted over to apply this after the items are set
jQuery_1_4_2(".modal[href], .modal a[href]").colorbox();

return this;

不要将所有这些都放在View的render()方法中，而是不要破坏这些代码以使其具有更多的逻辑意义并使用Backbone提供的功能您？以下是filtering a Backbone Collection使用Collection本身的示例（这是一种更适合和可维护的方法）。

从Backbone.Collection本身处理Backbone.Collection项目的过滤，并使用它与数据库的便捷连接（作为您的视图和模型之间的同步，构成集合），如果用户通过UI启动状态更改以确保数据完整性而非您在此处执行的操作，则非常方便。

如果您可以整体提供集合，模型和视图中的代码，我或许可以为您提供更好的答案。根据我在这里看到的，有太多的变量我不知道要解决。

Backbone js过滤器显示

1 个答案: