オブジェクトの配列をビューに渡すことで、jade テンプレート内にオブジェクトをプログラムで表示/レンダリングしようとしています。目標は、行ごとに最大 3 つのアイテム/オブジェクトを含むグリッド ビューを表示することです。ネストされた要素がインライン コード ブロック内で自己終了するという問題が発生しました。
目標を達成するために、Mixins の実験を開始しました。
mixin testCase_Columns(obj)
- for (var i = 0; i < obj.length; i++)
if (i%3==0)
div.row
+renderObj(i, obj)
上記のロジックは、配列内の現在のオブジェクト番号が 3 で割り切れるかどうかを識別します。これは、行ごとに 3 つのアイテム/オブジェクトのレンダリングを制御する方法です。ここから、オブジェクトとカウンター変数を 2 番目の mixin に渡します。
mixin renderObj(i, obj)
- for(var xx = 0; xx <3 ; xx++)
div.col-lg-4
p='Object:' + obj[i].proj
**- i++**
上記では、3 つの列をレンダリングし、カウンター 'i' に 1 を追加します。この場合、'i' はオブジェクト配列キーを示すために使用されます。
私が抱えている問題は、i++インクリメントステートメントを含めると、ジェイドがエラーを返すことです:
type error: Cannot read property 'proj' of undefined
ただし、手動でキーを指定して各オブジェクトにアクセスして印刷するなど、さまざまなテストを実行しました。
obj[1].proj / obj[2].proj / obj[3].proj for example.
インクリメント ステートメントを追加しようとすると、顔が爆発します。
私はまだnode / jadeなどを学んでいます.おそらく私のコーディングは間違っています. 上記のコードステートメントには、3 つ未満のオブジェクトを含む最終行を正しくレンダリングするための基本的なロジックが欠けていることは承知していますが、現時点ではテストのみを行っています。
どんな助けでも大歓迎です。
前もって感謝します。