네스팅된 리스트 제대로 지원.

Author: lee-seungjae

Compiler/Program.cs

@@ -72,19 +72,10 @@ static Template ParseTemplate(HtmlNode templateNode, string namePrefix)
             template.ClassName = namePrefix + template.TemplateId;
             template.ModelName = templateNode.Attributes["j8-model"]?.Value;
 
-            var childNodes = templateNode.SelectNodes(".//*");
-            if (childNodes != null)
-            {
-                var listItemNodes = childNodes.Where(x => x.GetAttributeValue("j8-listItem", null) != null);
-                foreach (var node in listItemNodes)
-                {
-                    node.Remove(); // 지금 떼어놔야 바로 다음에 컨트롤 검색에서 빠진다.
-                    template.ListItems.Add(ParseTemplate(node, template.ClassName + "_"));
-                }
-            }
+            ScanListItems(template, templateNode);
 
             // j8-listItem 붙은 것들을 뗀 상태에서 다시 검색한다
-            childNodes = templateNode.SelectNodes(".//*");
+            var childNodes = templateNode.SelectNodes(".//*");
             if (childNodes != null)
             {
                 var controlNodes = childNodes.Where(x => x.GetAttributeValue("j8-control", null) != null);
@@ -105,6 +96,25 @@ static Template ParseTemplate(HtmlNode templateNode, string namePrefix)
             return template;
         }
 
+        static void ScanListItems(Template template, HtmlNode baseNode)
+        {
+            if (!baseNode.HasChildNodes) { return; }
+
+            // 순회 중 컨테이너 변경이 일어나기 때문에 ToArray로 한번 복사해서 순회
+            foreach (var node in baseNode.ChildNodes.ToArray())
+            {
+                if (node.Attributes.Contains("j8-listItem"))
+                {
+                    node.Remove(); // 지금 떼어놔야 바로 다음에 컨트롤 검색에서 빠진다.
+                    template.ListItems.Add(ParseTemplate(node, template.ClassName + "_"));
+                }
+                else
+                {
+                    ScanListItems(template, node);
+                }
+            }
+        }
+
         static void CheckNode(Template template, HtmlNode node)
         {
             var textMatched = pattern.Matches(node.InnerText);

Library/jul8.ts

@@ -101,21 +101,9 @@
         fields: Fields;
 
         constructor(root: JQuery, scanFields: boolean) {
-            // 리스트 항목은 부모로부터 뗀다.
-            // 그래야 처음에는 없고, 추가하는 만큼 붙일 수 있으니까.
-            root.find('[j8-listItem]').each(
-                (i, v) => {
-                    let itemId = v.getAttribute('j8-listItem');
-
-                    if (this.lists[itemId]) {
-                        console.error('(Jul8) duplicate listItem id: [' + itemId + ']')
-                    }
-
-                    let j = $(v);
-                    let p = j.parent();
-                    j.detach();
-                    this.lists[itemId] = { list: p, itemTemplate: j };
-                });
+            // 먼저 리스트 항목을 찾아서 부모로부터 뗀다.
+            // 그래야 처음에는 없고, 추가하는 만큼 클론해서 붙일 수 있으니까.
+            this.scanListItem(root.get(0));
 
             // 템플릿과 다르게 컨트롤들은 부모로부터 떼지 않는다.
             // 이미 템플릿 단위로 복제 생성된 상태이기 때문.
@@ -135,6 +123,27 @@
             }
         }
 
+        private scanListItem(baseElem: Element) {
+            for (let i = 0; i < baseElem.children.length; ++i) {
+                let elem = baseElem.children[i];
+
+                if (elem.hasAttribute('j8-listItem')) {
+                    let itemId = elem.getAttribute('j8-listItem');
+                    if (this.lists[itemId]) {
+                        console.error('(Jul8) duplicate listItem id: [' + itemId + ']')
+                    }
+
+                    let j = $(elem);
+                    let p = j.parent();
+                    j.detach();
+                    this.lists[itemId] = { list: p, itemTemplate: j };
+                }
+                else {
+                    this.scanListItem(elem);
+                }
+            }
+        }
+
         private visitElem(elem: Element) {
             let childNodes = elem.children;
             if (childNodes.length > 0) {

Sample/html/sample_templates.html

@@ -38,6 +38,7 @@
                     <th>번호</th>
                     <th>내용</th>
                     <th>INPUT</th>
+                    <th>네스팅된 리스트</th>
                     <th>동작</th>
                 </tr>
             </thead>
@@ -52,6 +53,9 @@
                     <td>
                         <input j8-control="inNum" type="text" value="{{ inNum }}" />
                     </td>
+                    <td>
+                        <span j8-listItem="Tag" class="label label-default" style="margin-right:2pt"></span>
+                    </td>
                     <td>
                         <button j8-control="btnReflect" class="btn btn-default btn-xs">입력 반영</button>
                         <button j8-control="btnRemove" class="btn btn-default btn-xs">지우기</button>

Sample/main.ts

@@ -38,6 +38,10 @@ class MyTable extends MyTable_d {
             let v = tr.inNum.val();
             tr.set({ num: v, inNum: v });
         });
+
+        tr.listOf_Tag.add(MyTable_TR_Tag_d).$.text('Tag1');
+        tr.listOf_Tag.add(MyTable_TR_Tag_d).$.text('Tag2');
+        tr.listOf_Tag.add(MyTable_TR_Tag_d).$.text('Tag3');
     }
 
     summarize(): string {

Sample/sample_templates.g.ts

@@ -44,6 +44,7 @@ class MyTable_TR_d implements Jul8.View
     inNum: JQuery;
     btnReflect: JQuery;
     btnRemove: JQuery;
+    listOf_Tag: Jul8.ViewList<MyTable_TR_Tag_d>;
 
     constructor($: JQuery)
     {
@@ -54,6 +55,7 @@ class MyTable_TR_d implements Jul8.View
         this.inNum = s.C('inNum');
         this.btnReflect = s.C('btnReflect');
         this.btnRemove = s.C('btnRemove');
+        this.listOf_Tag = s.L<MyTable_TR_Tag_d>('Tag');
     }
 
     private j8fields: Jul8.Fields;
@@ -64,3 +66,14 @@ class MyTable_TR_d implements Jul8.View
         this.j8fields.set(data);
     }
 }
+
+class MyTable_TR_Tag_d implements Jul8.View
+{
+    $: JQuery;
+    
+    constructor($: JQuery)
+    {
+        this.$ = $;
+        let s = new Jul8.Scanner(this.$, false);
+    }
+}