new Suit.view()
Reference to the container of View features.
Members
-
staticSuit.view.nameAttribString
-
Variable that defines the naming style of the views. Defaults to 'n'.
Example
Suit.nameAttrib = "vname";
<div vname='view-name'></div>
Methods
-
staticSuit.view.contains(p_view, p_child){Boolean}
-
Returns a flag indicating if a given view contains another view.
Name Type Description p_viewString | Element p_childString | Element - See:
Returns:
Type Description Boolean - Flag indicating if 'view' is inside 'target'.
Example
<div n='parent'> <div n='child'> <div n='child2'></div> </div> </div> <div n='other'></div>var p = Suit.view.get("parent");
var c = Suit.view.get("parent.child");
Suit.view.contains("parent.child",c); //Returns true
Suit.view.contains(p,"parent.child.child2"); //Returns true
Suit.view.contains("parent.child","other"); //Returns false -
staticSuit.view.get(p_target, p_root){Object}
-
Searches for the target by its path's string or returns itself if DOM element.
Name Type Description p_targetString | Element Path to the element or the element itself.
p_rootString | Element nullable Start point of the path search. Defaults to [body].
- See:
Returns:
Type Description Object - The view element located at 'target' path or 'target' itself.
Example
<div n='container'> <div n='title'>Title</div> <form n='form'> <input type='text' n='field'> <button n='button'>Send</button> </form> </div>var form = Suit.view.get("container.form"); //Gets [form]
var button = Suit.view.get("button",form); //Gets [button] starting at [form]
button = Suit.view.get("button","container.form""); //Gets [button] starting at [form] (same as above).
button.onclick = function() {
var field = Suit.view.get("container.form.field"); //Gets [input]
console.log(field.value);
} -
staticSuit.view.name(p_target, p_value){String}
-
Get/Set the name attribute of a HTML View.
Name Type Description p_targetString | Element View element to be renamed.
p_valueString Name of the view element.
- See:
Returns:
Type Description String - The view element's name.
Example
<div n='parent> <div n='child'></div> </div>Suit.view.name("parent.child"); //returns 'child'
Suit.view.name("parent.child","new-child"); //returns 'new-child'<!-- updated dom --> <div n='parent> <div n='new-child'></div> </div> -
staticSuit.view.parent(p_target){Element}
-
Returns the first parent element which is a Suit's View element (i.e. have a name attrib).
Name Type Description p_targetString | Element Target to have its parent checked.
Returns:
Type Description Element - The reference to the parent element of 'target'.
Example
<div n='a'> <div n='b'> <div class='empty'> <div n='c'></div> </div> </div> </div> <div n='other'></div>var a = Suit.view.get("a");
var b = Suit.view.get("a.b");
var e = Suit.view.query(".empty")[0]; //[div] without name
Suit.view.parent("a.b") == a; //true
Suit.view.parent(b) == a; //true
Suit.view.parent("a.b.c") == b; //true (will skip the empty [div])
Suit.view.parent(e) == b; //true (will go up until first view Element) -
staticSuit.view.path(p_target, p_root, p_separator){String}
-
Returns the 'separator' separated path of target relative to 'root' parameter. In case of mismatched arguments it returns an empty string. The default separator is '.'
Name Type Description p_targetString | Element Target view to generate the path.
p_rootString | Element nullable Start point to search for 'target'. Defaults to [body].
p_separatorString nullable String separator for the resulting path.
Returns:
Type Description String - The path for 'target' separated by the chosen 'separator'.
Example
<div class='ctn' n='container'> <div n='title'>Title</div> <form n='form'> <input class='ff' type='text' n='field'> <button n='button'>Send</button> </form> </div>var input = document.querySelector(".ff"); //Gets [input]
var container = document.querySelector(".ctn"); //Gets [container]
console.log(Suit.view.path(input)); //Returns 'container.form.field'
console.log(Suit.view.path(input,container,"/")); //Returns 'form/field' -
staticSuit.view.query(p_query, p_target){Array.<Element>}
-
Executes a querySelectorAll on the target and returns an Array with the results.
Name Type Description p_queryString Selector query.
p_targetString | Element nullable Target view to apply the query. Defaults to [body]
Returns:
Type Description Array.<Element> - List of zero or more results.
Example
<div class='ctn' n='container'> <ul n='list0'> <li>A</li> <li>B</li> </ul> <ul n='list1'> <li>C</li> <li>D</li> </ul> </div>//Similar to document.querySelectorAll()
Suit.view.query("li"); //Returns a [li] Array with (A,B,C,D).
Suit.view.query("li","container.list1"); //Returns a [li] Array with (C,D) (starts at 'list1').
Suit.view.query(".container"); //Returns an empty Array [] ('query' never returns null) -
staticSuit.view.traverse(p_target, p_callback, p_bfs, p_args)
-
Navigates the DOM hierarchy of the target element and invokes the callback for each element.
If the callback returns false the search stops.
The default mode is DepthFirstSearch (DFS), if the last parameter is 'true' the mode will be BreadthFirstSearch (BFS)
It is possible to pass arguments for the specified callback too.Name Type Description p_targetString | Element Path or Reference to the element.
p_callbackViewTraverseCallback Callback to handle each element visit.
p_bfsBoolean nullable Flag that indicates if Breadth First Search will be used.
p_argsObject nullable Extra data passed in each callback call.
Example
<div n='a'> <div n='b'> <div n='c'></div> </div> <div n='d'> <div n='e'> <div n='f'></div> </div> </div> </div> <div n='other'></div>//Will visit ([body],a,b,c,d,e,f) (Depth First Search)
Suit.view.traverse(document.body,function(p_node,p_args) { ... },false, {some: "data"});//Will visit ([body],a,d,b,e,f) (Breadth First Search)
Suit.view.traverse(document.body,function(p_node,p_args) { ... },true, {some: "data"});