[PURE] How do you capture current value within inline function?

[deen...@gmail.com]

Simply put, I would like to know what the value is currently from within the directive's inline function, so that I can programmatically choose to return it, modified or not, or discard it. Is this possible?

Assume a very basic template of <div><ol><li><ol><li></li></ol></li></ol></div>, to keep things simple.

// Example data...
var data = [
    {
        id: 1,
        parent_name: 'root category 1',
        children: [
            {
                id: 11,
                child_name: 'sub category 1a'
            },
            {
                id: 12,
                child_name: 'sub category 1b'
            }
        ]
    },
    {
        id: 2,
        parent_name: 'root category 2',
        children: []  // some root categories have no child-nodes.
    }
];
var directive = {
    'li': {
        'category<-': {
            'li': {
                'subcategory<-category.children': {
                    '.': 'subcategory.child_name'
                }
            },
            '.': function(a) {
                if (this.children.length) {
                    // Prepend the parent name before the already rendered children.
                    return this.parent_name + a.CURRENT_VALUE;
                } else {
                    // Discard the non-populated children OL tags from the nested list.
                    return this.parent_name;
                }
            }
        }
    }
};

$('div').render(data,directive);

The "a.CURRENT_VALUE" is what I haven't figured out. Is there something like that I could reference?

This is what I am currently doing...

var directive = {
    'li': {
        'category<-': {
            'li': {
                'subcategory<-category.children': {
                    '.': 'subcategory.child_name'
                }
            },
            '+.': 'category.parent_name'
        }
    }
};

But, if there are no children, it is leaving empty OL elements in my HTML source. Not too big of deal, but I like to keep things clean.

Perhaps and alternative would be a way to FORGET the '+' prepend/append setting programmatically?

var directive = {
    'li': {
        'category<-': {
            'li': {
                'subcategory<-category.children': {
                    '.': 'subcategory.child_name'
                }
            },
            '+.': function(a) {

                // This would actually be a clean solution if anyone knows how!
                if (!this.children.length) a.prepend = false;

                return this.parent_name;
            }
        }
    }
};

Thanks in advance for any ideas.

[Mic (BeeBole)]

It is not possible, since pure.js use a compilation logic.

Rendering a template has two steps.

One is the compilation of the template to a JS function, where the HTML and the directive are known and used.

Then the execution of that function, where only that compiled JS function and the data are known and used.

The functions in your directives are called in the second step, have only the data at their disposal, and are disconnected from the initial HTML.

If you want to hide the OL's (if they are visible).

You can add a condition above the loop like:

'ol@style': function(a){
  return this.children.length ? '' : 'display:none';
}

It is not clean on the DOM, I agree, but the browser will ignore it for the styles computing, layout, painting.

[deen...@gmail.com]

Thank you for your reply, Mic. Your "not possible" response gave me an an idea that worked, though. It may not be optimal programmatically, but it eliminates the stray <ol>'s.

I added a "has_children" property to my data which simply returns [true] or []. Meaning, I'm using it for either 1-element or NO-element array, the value "true" doesn't matter. Then, if I loop over it for the <ol> it will only show up for the 1-element if there are children <li>'s to include.

var directive = {
    'li': {
        'category<-': {

            'ol': {
                'subcategories<-category.has_children': {

                    'li': {
                        'subcategory<-category.children': {
                            '.': 'subcategory.child_name'
                        }
                    },

                },
            },'+.': 'category.parent_name'
        }
    }
};

Unless anyone has a better solution, this is good enough for now.

Thanks again.