2

残念ながら、私は画像を投稿することを許可されていないため、目前の問題を示すのが少し難しくなっています. というわけでここで説明します。最後の Meteor オンスクリーン ディスプレイには、項目を含む請求書があります。項目とすべてが完全に機能し、期待どおりに表示されます。私がやりたかったのは、4 つの行項目が画面に印刷された後に #each-loop に「侵入」し、それから何か他のこと (小計の計算と印刷) を行うことでした。私が作成したセッション変数は、すべての項目で反応的に変更されないように見えるため、それを機能させることはできません。代わりに、完全な #each ループの最後の値を保持しているようです。

そこには listindex 変数があり、#each ループ内にある各行項目で 1、2、3、および 4 に完全に再アクティブ化されることに注意してください。そのため、listindex 変数は#each ループ内でリアクティブに機能します。

同時に、そこにセッション変数を導入しています。これは、行項目番号 4 で「true」になり、他のすべての場合では「false」になります。「true」の場合、「onderbreking」がすぐそこに表示されます。ただし、セッション変数は常に「true」を返し、（そのため）常に「onderbreking」を出力します。もちろん、それは私が意図した方法ではありません。

listindex が機能し、セッション var が機能しない理由がわかりません。

これが私のjavascriptです。テンプレートは「layout6.html」と呼ばれます。

  Template.layout6.helpers({
        // Bereken de index in de #each loop
        listIndex: function() {
          currentIndex += 1;
          if(currentIndex == 4) {
            Session.set('sessionPageBreak1', true);
          }
          if(currentIndex != 4) {
            Session.set('sessionPageBreak1', false);
          }
        return currentIndex;
        },            
  });    

 Template.layout6.SessionPageBreak1 = function() {
            // Voeg de waarde van de sessie variabele toe aan de template
            var data = Session.get('sessionPageBreak1');
            return data;
 };

セッション変数は最初にここで設定されます。

  // Session var for layoutcounter
  Session.setDefault('sessionPageBreak1', false);
  Session.setDefault('sessionPageBreak2', false); 
  Session.setDefault('sessionPageBreak3', false);  
  var currentIndex = 0.0;

最後に、これは layout6.html に関連する html です。

{{#each factuur6.lineItems}}
  {{listIndex}}
  {{SessionPageBreak1}}
{{#if SessionPageBreak1}}
<div><p>onderbreking</p></div>
{{/if}}

もちろん、{{/each}} ステートメントもありますが、その間にこの問題とはあまり関係のないコードがたくさんあるので、ここには入れませんでした。

私は私がすべてを含めたことを願っています.

問題は、セッション変数が #each ループ内で反応的に変化しないように、私は何を間違っているのでしょうか?

4

1 に答える 1

2

これは、実際にはセッション変数を使用する正しい方法ではありません。セッション変数は、単一の計算による中間値を格納するためのものではなく、グローバルなアプリケーション状態のためのものです。原則として、テンプレートとテンプレート ヘルパーには副作用 (セッション変数の設定など) があってはなりません。

私は別のアプローチを取るでしょう。ヘルパーを定義します。

lineItemsWithIndex: function () {
  return _.map(this.factuur6.lineItems, function (item, index) {
    var newItem = _.clone(item);
    newItem.index = index;
    return newItem;
  });
}

この関数は のコピーを返しますがthis.factuur6.lineItems、各オブジェクトにはindexプロパティが追加されています。たとえば、 のリストが の場合lineItems、[{name: "foo"}, {name: "bar"}, {name: "baz"}]を返し[{name: "foo", index: 0}, {name: "bar", index: 1}, {name: "baz", index: 2}]ます。元のリストは変更されていません。factuur6がフィールドではなくヘルパーの場合は、代わりに を使用します_.map(Template.layout6.factuur6().lineItems ...。

次に、テンプレートでそれを繰り返します。

{{#each lineItemsWithIndex}}
  {{index}}
  {{pageBreak1}}
  {{#if pageBreak1}}
    <div><p>onderbreking</p></div>
  {{/if}}
{{/each}}

pageBreak1はヘルパーです(function () {return this.index == 3;}これらのインデックスは 0 ベースであるため、4 ではなく 3 です)。各オブジェクトにインデックスを追加したので、ヘルパーでアクセスできるようになりました。

これは、広告申込情報に というフィールドがまだないことを前提としていますindex。

于 2014-08-05T10:04:25.210 に答える