Kioo: Dynamic Nesting

[Boris Kourtoukov]

I am struggling to wrap my head around the following:

If I have a snippet of nested lists like:

<div class="accordion">
    <ul>
        <li><a href="#">One</a>
            <ul>
                <li><a href="#">A</a></li>
                <li><a href="#">B</a>
                    <ul>
                        <li><a href="#">Sub A</a></li>
                    </ul>
                </li>
            </ul>
        </li> 
    </ul>
</div>
 

And I want to map this to the following data:

(def app-state 
  (atom 
    {;; App Depth Tree
     "One" {
               "A" {
                          "Sub A" nil
                          "Sub B" nil
                          "Sub C" nil}
               "B" {
                          "Sub A" nil
                          "Sub B" nil
                          "Sub C" nil}
               "C" {
                          "Sub A" nil
                          "Sub B" nil
                          "Sub C" nil}}
     "Two" {
               "A" {
                          "Sub A" nil
                          "Sub B" nil
                          "Sub C" nil}
               "B" {
                          "Sub A" nil
                          "Sub B" nil
                          "Sub C" nil}
               "C" {
                          "Sub A" nil
                          "Sub B" nil
                          "Sub C" nil}}}))
 

I just can't wrap my head around how to create a (defsnippet) that would be able to continue nesting indefinitely based on the nesting in that map.

Should I build this piece directly with om or am I missing a fundamental piece of logic?

[ckirkendall]

Boris,

So you are dynamically nesting lists based on map.  I can think a few ways to do this, they all have a recursive type of template.

<div class="accordion">
    <ul>
        <li class="with-sub"><a href="#">One</a>
            <ul>
                <li class="without-sub"><a href="#">A</a></li>
                <li><a href="#">B</a>
                    <ul>
                        <li><a href="#">Sub A</a></li>
                    </ul>
                </li>
            </ul>
        </li> 
    </ul>
</div>

(defn get-subs [[ky children]]

   (if (empty? children)

      (without-sub ky)

      (with-sub ky children)))

(defsnippet with-sub "path.html" [:.sub-level] [ky children]

   {[:li :> :a] (content ky)

    [:li :> :ul] (content (map get-subs children))})

(defsnippet without-sub "path.html" [:.sub-level] [ky children]

   {[:li :> :a] (content ky)})

(defsnippet accordion "path.html" [:.accordion] [data]

   {[:div :> :ul] (content (map get-subs data))})

The above is a rough guess of what you need.

Creighton

[ckirkendall]

Sorry made some typos

<div class="accordion">

    <ul>

        <li class="with-sub"><a href="#">One</a>

            <ul>

                <li class="without-sub"><a href="#">A</a></li>

                <li><a href="#">B</a>

                    <ul>

                        <li><a href="#">Sub A</a></li>

                    </ul>

                </li>

            </ul>

        </li> 

    </ul>

</div>

(defn get-subs [[ky children]]

   (if (empty? children)

      (without-sub ky)

      (with-sub ky children)))

(defsnippet with-sub "path.html" [:.with-sub] [ky children]

   {[:li :> :a] (content ky)

    [:li :> :ul] (content (map get-subs children))})

    

(defsnippet without-sub "path.html" [:.without-sub] [ky]

[Boris Kourtoukov]

Works perfectly. I didn't think of using classes for the list items in the template. But it makes perfect sense, and now I have a hopefully better understanding of making snippets more dynamic.

As an aside, it seems that because get-subs is above with-sub and without-sub the compiler throws two 'not found' warnings. The JS still runs fine due to the way its all scoped but I am wondering if there is a proper way to avoid it. (Since if I put get-subs below the two snippets then without-subs throws a warning because it can't see get-subs)

Thanks,
Boris

[Boris Kourtoukov]

Sorry not 'Not found' but 'WARNING: Use of undeclared Var demo.core/without-sub at line 84 src/cljs/demo.cljs'

[ckirkendall]

You need to add a declare definition at the top of the file for without-sub and with-sub.

(declare without-sub with-sub)

CK

[Boris Kourtoukov]

Thanks!