Question

我的应用在实施此columnWidth辅助方法后崩溃了我的浏览器。我要做的就是在col-md-7和col-md-5之间轮换（Bootstrap类），这样就不会有两个连续的帖子宽度相同。

columnWidth: function() {
    if (Session.get('columnWidth') === 'col-md-7') {
        Session.set('columnWidth', 'col-md-5');
    } else {
        Session.set('columnWidth', 'col-md-7');
    }

    return Session.get('columnWidth');
}

帖子模板：

{{#each this}}
    <div class="{{columnWidth}}">
        <a href="/a/{{url}}"><img src="{{image}}" height="350" width="{{imageWidth}}" alt=""></a>
        <div class="content">
            <h2><a href="/a/{{url}}">{{title}}</a></h2>
            <p>{{content}}</p>
            <span class="dateAuthored">{{date}}</span>
        </div>
    </div>
{{/each}}

this指的是：

data: function() {
    return Articles.find();
}

为什么会发生这种情况？我没有收到任何错误。浏览器选项卡只是没有响应。感谢。

Answer 1

你经常设置相同的反应变量，例如在调用帮助器时使用第一个div它将它设置为col-md-7，然后当为第二行调用它时你将相同的变量更改为col-md-5由于两个原因而存在问题：

a）模板将重绘第一列，因此它们都将是col-md-5

b）将再次调用相同的助手。我相信你的浏览器崩溃是因为你创建了一个无限循环。尝试在columnWidth助手中记录控制台，并查看它被调用的次数。

要实现您想要的功能，您需要获取{{#each}}循环的索引，然后让列类依赖于它是奇数还是偶数。不幸的是，在流星把手中获得索引有点棘手。

尝试：

{{#each articles}}
    <div class="{{columnWidth index}}">
        <a href="/a/{{url}}"><img src="{{image}}" height="350" width="{{imageWidth}}" alt=""></a>
        <div class="content">
            <h2><a href="/a/{{url}}">{{title}}</a></h2>
            <p>{{content}}</p>
            <span class="dateAuthored">{{date}}</span>
        </div>
    </div>
{{/each}}

然后是以下助手：

articles: function() {
  //'this' in this context should work. 
  //if not just replace with Articles.find().map(...
  var articles = this.map(function(article, index) {
    var i = _.extend(article, {index: index});
    return i;
  });
  return articles;
},
columnWidth: function(index) {
  if (index % 2 === 0)
    return "col-md-5";
  else
    return "col-md-7"
}

模板助手崩溃的应用程序

1 个答案: