TapQuo/Lungo.js — Issue #29: data-search =
Author: daithiw44
Created: 2011-12-01 13:25:41+00:00
State: open

In an article of class .list where data-search is set there are the following issues.

Issue 1. The LUNGO.Attributes.Data for 'search' will return the li and its not inside a

search: {
tag: 'search',
selector: '.list',
html: '
'
},

Is the intention to have this as part of the list being created or to be inside its own

?

Issue 2. When build a article of class .list dynamically from a template with data-search the ul placeholder will never be build because of the following function

var _createListElement = function(article) {
// The data-search will already have created a child
if (article.children().length === 0) {
var article_id = article.attr('id');
article.append('

');
}
};

the article with the attribute data-search will already have children as when the page is being rendered the lng.View.Template.Binding.dataAttribute(element, attribute) will create an innerHTML for LUNGO.Attributes.Data.search and so the < ul> will never be built and so there will be no element to attached scrolling or the template to.

Suggestion.

1. On LUNGO.Attributes.Data search.

Be good to give both the 'input box' and the 'a href' an id based on the article id so that its easy to add events to the buttons. So something like:

"
"

and also what might be the easiest way out would be to have the following

OPTION A)
A separate ul for the search

"

"

Give the template the articleid appending to a string for the ul, the input box and the a href search button. This will make attaching events to these elements easier.

ul has id = 'searchul_' + articleid
input box has id = 'searchtext_' + article_id
search button has id = 'searchbtn_' + article

handle the replace inside

var dataAttribute = function(element, attribute) {
var data = element.data(attribute.tag);
if (data) {
// handle the replace for search
if(attribute.tag === 'search'){
var regex;
regex = new RegExp(BINDING_START + 'article_id' + BINDING_END, "g");
var html_binded = attribute.html.replace(regex, element.attr('id'));
html_binded = html_binded.replace(BINDING_START + 'value' + BINDING_END, data);
}
else{
var html_binded = attribute.html.replace(BINDING_START + 'value' + BINDING_END, data);
}
element.prepend(html_binded);
}
};

Then make a change in function createListElement to check if there is 1 child we'll know the id format node type etc of the 1 child and if so create the new ul and append it to the article.

OPTION B)
The other option is to create the ul from the data-search

"

"

only problem here is when we build our li element via template we clear the contents of the ul and hence remove the search li. so there would be more work here, especially if adding and removing li elements based on the filter.

I've implemented Option A) locally and will test shortly, I'll commit it to my fork if you're interested in that as a fix and see if you want it as a pull request.

Let me know what you think or if you need more information.

Daithi