Mojo.View

Namespace Detail

All User Interface (UI) layout files are located in the views folder of your application. Much of the user interface in Mojo is assembled out of text files containing fragments of HTML and special tags indicating locations to insert dynamic data.

A scene assistant has one main HTML view file, which provides the static structure and content of its presentation page. It also includes zero or more HTML template view files that may be used to display dynamic data, such as JavaScript object properties from a scene assistant.

Developers can use templates directly by calling Mojo.View.render, but more often they will pass names of templates as part of widget setup or use them implicitly in scene creation.

Method Summary

• Mojo.View.addTemplateLocation(basePath, localizedPath, viewFolderName)
• Mojo.View.addTouchFeedback(targetElement)
• Mojo.View.advanceFocus(containingElement, optionalSelection)
• Mojo.View.clearTouchFeedback(root)
• Mojo.View.convertToNode(htmlContent, targetDocument)
• Mojo.View.convertToNodeList(htmlContent, targetDocument)
• Mojo.View.getFocusableList(containingElement)
• Mojo.View.getFocusedElement(containingElement)
• Mojo.View.getScrollerForElement(targetElement)
• Mojo.View.makeFocusable(targetElement)
• Mojo.View.makeNotFocusable(targetElement)
• Mojo.View.removeTouchFeedback(targetElement)
• Mojo.View.render(renderParams)
• Mojo.View.requiresProperties(element, target, one)
• Mojo.View.visible(element)

---

Method Detail

Mojo.View.addTemplateLocation(basePath, localizedPath, viewFolderName)

Adds a pair of locations to be used for loading localized templates. If a template is specified by full path and the base path is a prefix of the full path, the localized path for the correct locale will be searched first for the template.

Parameters

• {String} basePath - Path containing templates
• {String} localizedPath - Path containing localized resources
• {String} viewFolderName - Name of the folder inside the resources folder that contains the views.

---

Mojo.View.addTouchFeedback(targetElement)

Adds touch feedback to a new element and always removes touch feedback from the existing highlighted element.

Parameters

• {Element} targetElement - Element to which to add feedback

---

Mojo.View.advanceFocus(containingElement, optionalSelection)

Advances the current text focus to the next focusable element in the containing element, or sets it to the first focusable element in the container if nothing in the container is currently focused.

Parameters

• {Element} containingElement - Element in which to advance focus
• optionalSelection

---

Mojo.View.clearTouchFeedback(root)

Parameters

• root

---

Mojo.View.convertToNode(htmlContent, targetDocument)

Converts the given HTML content into nodes, and returns the first element node at the top level of the content.

Parameters

• {Object} htmlContent
• targetDocument

---

Mojo.View.convertToNodeList(htmlContent, targetDocument)

Returns a nodelist resulting from converting the given html content into nodes. A shared rendering div is used for this conversion, so the caller should not keep a reference to the nodelist, and needs to remove the nodes from their parent (the shared div).

Parameters

• {Object} htmlContent - the html content to convert
• targetDocument

---

{String|Object|Array|Boolean|Number} Mojo.View.getFocusableList(containingElement)

Returns a list of DOM elements that are considered focusable.

Parameters

• {Element} containingElement - Defines the subtree of the DOM to search for focusable elements. The element itself is not included in the search.

---

Mojo.View.getFocusedElement(containingElement)

Returns the currently focused element inside the passed-in container, or null if there is no such element.

Parameters

• {Element} containingElement - Element to search

---

Mojo.View.getScrollerForElement(targetElement)

Searches from targetElement up the DOM looking for a Scroller widget that contains the targetElement.

Parameters

• targetElement - the element to get the scroller for.

---

Mojo.View.makeFocusable(targetElement)

Marks an element as being one that can be focused. Currently implemented by adding a tabindex attribute of value "0".

Parameters

• {Element} targetElement - Element to make focusable

---

Mojo.View.makeNotFocusable(targetElement)

Marks an element as being one that can not be focused. Currently implemented by removing the tab index value

Parameters

• {Element} targetElement - Element to make not focusable

---

Mojo.View.removeTouchFeedback(targetElement)

Removes touch feedback from an element.

Parameters

• {Element} targetElement - Element from which to remove touch feedback

---

Mojo.View.render(renderParams)

Use a partial and one or more objects to create HTML markup.

The first example shows how we would bind a single object to a template:

var content = Mojo.View.render({object: contact, template: 'detail/header'});
headerElement.innerHTML = content; 

This shows how we render a list of objects with a template and a separator:

var content = Mojo.View.render({collection: songs, template: 'list/song',
  separator: 'list/separator''});
listElement.innerHTML = content; 

Parameters

• renderParams - a hash that may contain the following property names and values:

  • [object] the object to use to resolve property references in the template.

  • [collection] a list of objects to bind individually to a template in order to create a list.

  • [attributes] an extra object which is additionally used to resolve property references in templates, when the property does not exist in 'object' or the appropriate 'collection' element.

  • [formatters] A hash of property names to formatter functions which should be applied prior to rendering. See Mojo.Model.format().

  • [template] the partial or full path to the template.

  • [separator] when rendering a collection, a template to use as a separator between individual list elements.

---

Mojo.View.requiresProperties(element, target, one)

Given a DOM element and a target object, hide the element if the value of any of the named properties are undefined or have a false value in the target.

Parameters

• {Object} element - DOM element to hide
• {Object} target - object to check for property definitions
• {Object} one - one or more property names

---

{Boolean} Mojo.View.visible(element)

Returns true if the element and all of its ancestors are visible.

Parameters

• {Object|} element - element to check for visibility