0

columnWidthこのヘルパー メソッドを実装した後、アプリがブラウザーをクラッシュさせます。私がやろうとしているのは、col-md-7とcol-md-5(Bootstrap クラス) の間を回転させて、2 つの連続する投稿が同じ幅にならないようにすることです。

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();
}

なぜこれが起こっているのですか？エラーは表示されません。ブラウザーのタブが応答しなくなります。ありがとう。

4

1 に答える 1

1

常に同じリアクティブ変数を設定しているため、たとえば最初の div でヘルパーが呼び出されたときにそれが col-md-7 に設定され、2 行目で呼び出されたときに同じ変数が col-md に変更されます。 -5 2 つの理由で問題があります。

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"
}
于 2014-08-15T17:31:45.623 に答える