Próbuję programowowyświetlać / renderować obiekty w szablonie jadeitu, osiągnięte przez przekazanie tablicy obiektów do widoku. Celem jest wyświetlenie widoku siatki z maksymalnie 3 elementami / obiektami w rzędzie. Wystąpił problem z samozamykaniem elementów zagnieżdżonych w liniowych blokach kodu.
Zacząłem eksperymentować z Mixinami, aby osiągnąć swój cel:
mixin testCase_Columns(obj)
- for (var i = 0; i < obj.length; i++)
if (i%3==0)
div.row
+renderObj(i, obj)
Powyższa logika określa, czy bieżący obiektliczba w mojej tablicy jest podzielna przez 3. W ten sposób zamierzam kontrolować renderowanie 3 elementów / obiektów w wierszu. Stąd przekazuję zmienną object i counter do drugiego mixinu:
mixin renderObj(i, obj)
- for(var xx = 0; xx <3 ; xx++)
div.col-lg-4
p="Object:" + obj[i].proj
**- i++**
Powyżej renderuję trzy kolumny i dodaję 1 do mojego licznika „i”, „i” w tym przypadku służy do określenia mojego klucza tablicy obiektów.
Problem, który mam, gdy dołączę instrukcję przyrostu i ++, jade zwraca błąd:
type error: Cannot read property "proj" of undefined
Jednak przeprowadziłem różne testy, w tym dostęp do każdego obiektu i wydrukowanie go, ręcznie wpisując klucz:
obj[1].proj / obj[2].proj / obj[3].proj for example.
Kiedy próbuję dodać instrukcję przyrostową, pojawia się ona na mojej twarzy.
Wciąż uczę się węzła / jadetu itp. Być może moje kodowanie jest nieprawidłowe. Wiem, że powyższa instrukcja kodu nie ma podstawowej logiki do prawidłowego renderowania ostatniego wiersza zawierającego mniej niż trzy obiekty, ale w tej chwili testuję tylko.
Każda pomoc byłaby bardzo cenna.
Z góry dziękuję.
Odpowiedzi:
0 dla odpowiedzi № 1Może powinieneś uciec od tego „rzędu”myślący. Popraw mnie, jeśli się mylę, ale to, co masz, to oczywiście „lista” obiektów. Dlaczego więc nie użyć po prostu znaczników listy zamiast niepotrzebnego rąbania kolekcji obiektów na mniejsze części?
<ul>
<li> Object 1 </li>
<li> Object 2 </li>
<li> Object 3 </li>
<li> Object [...] </li>
<li> Object 20 </li>
</ul>
To takie proste. A teraz musisz tylko stylizować tę listę Fundacja to się nazywa blok siatki
0 dla odpowiedzi nr 2
Problemem jest to, że kończyszpróba uzyskania dostępu do tablicy poza jej granicami. W ten sposób przypadkowo próbujesz uzyskać dostęp do właściwości nieistniejącego obiektu, co jest błędem w JavaScript.
Twój kod jest nieco zawiły. Ale dzieje się coś takiego. Rozważ tablicę o długości 5. Twoja renderObj mixin jest następnie uruchamiany dwukrotnie. Za pierwszym razem zaczyna się od indeksu 0 i zwiększa się do 2. Za drugim razem jest wywoływany za pomocą i == 3 ponieważ to również spełnia twoje i % 3 == 0 instrukcja if. Ale potem rośnie i do 5 i próbuje uzyskać dostęp obj[5].proj. Ale obj ma długość 5 i dlatego nie ma treści poza indeksem 4. W ten sposób pojawia się błąd.
Przyjąłbym nieco inne podejście bez używania mixinów, które nadal działają z wcięciem Jade. Unikam problemu z indeksem, sprawdzając, czy indeks przekracza granice tablic.
Następujący szablon Jade
table
- for (var i = 0; i < Math.ceil(obj.length / 3); i++)
tr
- for (var j = 0; j < 3; j++)
if (i * 3 + j < obj.length)
td= obj[i * 3 + j]
Tworzy ten HTML
<table>
<tr>
<td>Yo</td>
<td>what</td>
<td>is</td>
</tr>
<tr>
<td>up</td>
<td>end</td>
</tr>
</table>
Po uruchomieniu z następującymi opcjami wiersza poleceń: jade test.jade -O "{ obj: ["Yo", "what", "is", "up", "end"] }".
Powyższe działa tak, jak chcesz, ale jak wspomina mchlslzmnn, powinieneś rozważyć, czy twoje dane są w rzeczywistości czymś, co powinno być zaznaczone w formie tabeli. Specyfikacja W3C zawiera następujące informacje na temat table etykietka:
Element tabeli reprezentuje dane o więcej niż jednym wymiarze, w formie tabeli.
Jeśli Twoje dane są jednowymiarowe, a kolejność nie ma znaczenia, powinieneś użyć ul zamiast.