那个设定

我有Backbone.Marionette.ItemView呈现一些内容.当呈现内容时,我想应用一个jQuery插件,它将视图的一部分转换为带滚动条的容器.

滚动条完全用javascript实现,初始化时必须检查滚动容器的高度以及容器内容的高度.

如果内容高于容器,则应启用滚动条.

问题

虽然这听起来很简单,但我遇到了一个奇怪的问题:

如果我直接在onRender回调中初始化我的滚动条插件,似乎认为.scroll-container元素的高度为0,maxHeight为0.

如果我将初始化代码包装在0ms超时内,但一切都按原样运行,.scroll-container元素的height属性由jQuery正确返回,滚动条插件工作得很好.

代码

onRender: function() {
  var that = this;
  setTimeout(function() {
    that.onLayout();
    var $scrollContainer = that.$el.find('.scroll-container'), 
        scrollPane = new ScrollPane($scrollContainer, {
          maxHeightProperty: 'maxHeight',
          scrollUpButton: false,
          scrollDownButton: false
        });
  }, 0);
},

这个问题

我假设问题发生是因为浏览器在执行onRender回调时没有完成实际呈现新插入的html.

这个假设是否正确？如果是这样,我在正常情况下使用0ms超时的解决方案是否可靠？

我现在正在建立一个网上商店.这家商店允许用户过滤由产品category,和几个可选的,额外的过滤器,例如brand,color等等.

目前,各种属性存储在不同的地方,但我想切换到基于标签的系统.理想情况下,我的数据库应该使用以下数据存储标记:

• product_id
• tag_url_alias (独特)
• tag_type (独特的)(category,product_brand,product_color等)
• tag_value (不是唯一的)

第一个目标

我想搜索product_id与1-5个特定标签之间的任何地方相关联的.标签是从SEO友好的网址中提取的.所以我将为tag_url_alias每个标签检索一个唯一的字符串(),但我不知道tag_type.搜索将是一个交集,所以我的搜索应该返回product_id匹配所有提供的tags.

第二个目标

除了显示与当前过滤器匹配的产品外,我还想显示用户可能提供的其他类别和过滤器的产品数量.

例如,我当前的搜索是针对与标签匹配的产品:

Shoe + Black + Adidas

现在,商店的参观者可能会看到最终产品,并想知道其他品牌提供哪些黑鞋.因此,他们可能会去"品牌"过滤器,并选择任何其他列出的品牌.让我们说他们有两种不同的选择(实际上,这可能会有更多),导致以下搜索:

Shoe + Black + Nike > 103 results
Shoe + Black + K-swiss > 0 results

在这种情况下,如果他们在其过滤器中看到品牌"K-swiss"被列为可用选择,他们的搜索将返回0结果.

对于用户而言,这显然是相当令人失望的...我非常宁愿知道将"品牌"从"adidas"切换到"k-swiss"将会得到0结果,并且只需从过滤器中删除整个选项.

类别,颜色等也是如此.

在实践中,这意味着单个页面视图不仅会返回我的主要目标中描述的过滤产品列表,还可能返回数百个类似但不同的列表.每个过滤器值可以替换另一个过滤器值,或者添加到现有过滤器值.

容量

我怀疑我的数据库最终会包含:

250到1.000个唯一标签

它将包含:

10.000至100.000个独特产品

目前的想法

我做了一些谷歌搜索,发现了以下文章:http://www.pui.ch/phred/archives/2005/06/tagsystems-performance-tests.html

从该文章来看,运行数百个查询来实现第二个目标,将是一条非常缓慢的路线."toxy"示例可能适用于我的需要,它可能是我的第一个目标可以接受的,但对于第二个目标来说这将是无法接受的.

我想我可能会运行tag与其关联product_id的1匹配的单个查询,缓存这些查询,然后计算结果的交叉点.但是,我在MySQL中计算这些交叉点吗？还是用PHP？如果我使用MySQL,是否有一种特殊的方法我应该缓存这些单独的查询,或者提供我需要的所有正确的索引？

我想也很可能甚至可以缓存其中两个tag …

所需的功能

我正在使用Backbone.Collection来查看可排序列表中的数据.我已经找到了部分,点击某些dom元素设置我的Collection上的属性,以确定我想要排序的字段,以及应该进行排序的方向.然后应在集合上触发排序,之后视图将更新.

最终我希望能够对数字字段以及字符串进行排序.某些字符串应按字母顺序排序,其他字符串按自定义预定义顺序

我目前的做法

我在反向排序字符串上发现了以下帖子: 使用backbone.js以相反的顺序对字符串进行排序

我试图将它与比较器函数和以下自定义属性结合起来:

1. "状态"字段中可能值的自定义排序顺序
2. 哪个字段应该用于排序
3. 排序的方向

到目前为止我收集的Collection和Model类:

收藏

var ApplicationCollection = Backbone.Collection.extend({
  model: ApplicationModel,
  url: 'rest/applications',

  // sorting
  statusOrder: ['new', 'to_pay', 'payed', 'ready'],
  sortField: 'submission_timestamp',
  sortOrder: 'asc',
  sortBy: function() {
    console.log('ApplicationCollection.sortBy', this, arguments);
    console.log('this.comparator', this.comparator);
    var models = _.sortBy(this.models, this.comparator);
    if (this.sortOrder != 'asc') {
      models.reverse();
    }
    return models;
  },
  comparator: function(application) {
    console.log('ApplicationCollection.comparator', this, arguments);
    switch(this.sortField) {
      case 'status':
        return _.indexOf(this.statusOrder, application.get(this.sortField));
        break;
      case 'submission_timestamp':
      default:
        return application.get(this.sortField)
        break;
    }
  }
});

该模型

var ApplicationModel …

这个问题

我有一个itemview通过其初始化程序接收模型.渲染itemview时,会将属性添加到每个模型属性的视图元素中.

为什么会发生这种情况,我该如何防止这种情况发生？

示例场景

我的代码的简化示例如下所示:

var MyView = Marionette.ItemView.extend({
  tagName: 'div',
  id: 'myView',
  className: 'myClass',
  template: someTemplate,

  initialize: function(model) {
    this.model = model;
  }
});
var myView = new MyView(someBackboneModel);
myView.render();

假设模型的'id'属性值为'124',则会产生如下元素:

<div id="124" foo="foo" bar="bar" class="myClass">
  <!-- blabla -->
</div>

问题

正如您所看到的,MyView类中设置的id值被模型的id属性替换.

我的应用程序中有其他ItemViews,它们由Backbone.Marionette.CollectionView呈现,它呈现了不显示此行为的ItemView元素,并且根本不将它们的模型属性添加到它们的$ el.

有任何想法吗？

我试过在Marionette Source和Backbone来源中挖掘,但到目前为止我无法找到为什么会发生这种情况.

附录

根据Derick Bailey的要求,这里是完整的视图和模板,这对我来说是个问题:

风景:

var Admin_Applications_ApplicationReader_Application_View = Marionette.ItemView.extend({
  tagName: "div",
  id: "Admin-Applications-ApplicationReader-Application-View",
  template: ApplicationTemplate,
  templateHelpers: {
    moment: Moment
  },

  initialize: function(model) {
    this.model = model;
    this.bindTo(this, 'layout', this.onLayout);
  },

  // …