1

我正在使用 Backbone 和 JQuery，并希望创建一个 Backbone 视图来创建等高列，如本链接的方法 2 中所述。HTML 如下所示：

<div class="container">
 <div  id="leftcolumn" class="set_equal_height"> … Lots Of Content … </div>
 <div id="middlecolumn" class="set_equal_height"> … Lots Of Content … </div>
 <div  id="rightcolumn" class="set_equal_height"> … Lots Of Content … </div>
</div>

我将以下主干视图放在一起，但它可能不起作用，因为使用 .each 的循环不起作用（页面加载没有错误，但列的高度没有被 javascript 修改）：

define([
  'jquery',
  'underscore',
  'backbone',
], function($, _, Backbone) {
  var SetEqualHeight = Backbone.View.extend({
    initialize: function() {
      var tallestcolumn = 0;
      console.log(this.$el.height());
      console.log(this.$el.attr("id"));
      this.$el.each(function() {
        currentHeight = $(this).height();
        console.log(currentHeight);
        if(currentHeight > tallestcolumn) {
            tallestcolumn  = currentHeight;
        }
      });
    this.$el.height(tallestcolumn);
    },
  });
  return SetEqualHeight;
});

我在单独的 Wire 规范中定义了“el”参数，如下所示：{ el: 'div.set_equal_height' }，并且自从“console.log(this.$el.height())”和上面代码中的 console.log(this.$el.attr("id")) 打印正确。但是“.each”语句中的console.log没有打印出来，表明“.each”存在问题。我查看了这个问题并尝试了下划线“_.each”方法，但无法弄清楚如何使用给定类（即 div.set_equal_height）而不是给定数组迭代元素。谁能启发我让 .each 在上面的主干视图中工作？请！！！

仅供参考，以下函数可自行工作（我希望将其合并为 Backbone 视图或视图助手）：

function setEqualHeight(columns) {
 var tallestcolumn = 0;
 columns.each(function() {
  currentHeight = $(this).height();
  if(currentHeight > tallestcolumn) {
   tallestcolumn  = currentHeight;
  }
 });
 columns.height(tallestcolumn);
}
$(document).ready(function() {
 setEqualHeight($("div.set_equal_height"));
});
4

1 回答 1

2

我假设你正在用这样的东西实例化你的视图？

new SetEqualHeight({el: '.container')

如果是这样，这意味着$el它将被设置为您视图中的容器 div。 $(anything).each将迭代“”的所有成员anything......但在你的情况下只有一个成员（'.container'）。

解决方案是更改此行：

this.$el.each(function() {

至：

this.$el.find('.set_equal_height').each(function() {

或者更好（更多 Backbone-y）：

this.$('.set_equal_height').each(function() {

希望有帮助。

于 2012-07-06T19:31:14.600 回答