Skip to content

View Helpers

Jump to bottom Edit New page
tonyganch edited this page Oct 21, 2012 · 7 revisions

Geddy has multiple view helpers available for generating dynamic content for views. All of which can be used directly in the views or can be used from geddy.viewHelpers from anywhere in your app.

List of helpers

Notes

  • View helpers are very new and may be subject to changes often. Changes shouldn't cause too many problems, but check here if you run into problems with them.
  • All helpers have an alternate name. The first being camelCase and the other being snake_case

Action Helpers

When you create resources or other actions in controllers action helpers are created for them, but only for index, add, edit and show actions. Here's an example of action helpers for a users resource

addUserPath
// => {controller: "users", action: "add"}
editUserPath(10)
// => {controller: "users", action: "edit", id: 10}
usersPath
// => {controller: "users", action: "index"}
userPath(10)
// => {controller: "users", action: "show", id: 10}

All of the created action helpers can be used in the link helpers like linkTo and imageLink for example.

Truncate

truncate(string<String>, options<Integer/Object>)

Truncates a given string after a specified length if string is longer than length. The lat character will be replace with an omission for a total length not exceeding length.

#####Options [Integer]:

  • If an options is an integer it will be assumed that is the desired length

#####Options [Object]:

  • length[Integer] Length the output string will be(Default: 30)
  • len[Integer] Alias for length
  • omission[String] Replace the last letters with an omission(Default: '...')
  • ellipsis[String] Alias for omission
  • seperator[String/RegExp] Break the truncated text at the nearest seperator

#####Warnings:

  • Please be aware that truncating HTML elements may result in malformed HTML returned. If you'd like safe HTML truncation look at truncateHTML

#####Examples:

truncate('Once upon a time in a world', { length: 10 })
// => 'Once up...'

truncate('Once upon a time in a world', { length: 20, omission: '...(continued)' })
// => 'Once u...(continued)'

truncate('Once upon a time in a world', { length: 15, seperator: /\s/ })
// => 'Once upon a...'
// Normal Output: => 'Once upon a ...'

truncate('Once upon a time in a world', { length: 15, seperator: ' ' })
// => 'Once upon a...'
// Normal Output: => 'Once upon a ...'

truncate('<p>Once upon a time</p>', { length: 20 })
// => '<p>Once upon a ti...'

TruncateHTML

truncateHTML(string<String>, options<Integer/Object>)

Truncates a given string after a specified length if string is longer than length. The lat character will be replace with an omission for a total length not exceeding length. If once is true, only the first string in the first HTML element will be truncated leaving others as they were.

#####Options [Object]:

  • once[Boolean] If true only the first string in the first HTML element will be truncated(Default: false)

#####Notes:

  • All options available to truncate are available for truncateHTML
  • HTML elements are not included with the length of the truncation
  • HTML elements will not be truncated, so return value will always be safe for rendering

#####Examples:

truncateHTML('<p>Once upon a time in a world</p>', { length: 10 })
// => '<p>Once up...</p>'

truncateHTML('<p>Once upon a time <small>in a world</small></p>', { length: 10 })
// => '<p>Once up...<small>in a wo...</small></p>'

truncateHTML('<p>Once upon a time <small>in a world</small></p>', { length: 10, once: true })
// => '<p>Once up...<small>in a world</small></p>'

ImageLink

imageLink(source<String>, link<String/Object>, imageOptions<Object>, linkOptions<Object>)

Returns an anchor element to a given link with the given linkOptions, with the content being a image element to the given source and includes it's imageOptions

#####Notes:

  • linkto is used on the backend so any linkOption will be used for linkTo
  • imageTag is used on the backend as well so any imageOptions will be used for imageTag

#####Examples:

imageLink('images/google.png', 'http://google.com')
// => '<a href="http://google.com"><img alt="images/google.png" src="images/google.png" /></a>'

imageLink('images/google.png', 'http://google.com', { alt: '' }
// => '<a href="http://google.com"><img alt="" src="images/google.png" /></a>'

imageLink('images/google.png', 'http://google.com', { alt: '', size: '40x50' })
// => '<a href="http://google.com"><img alt="" height="50" src="images/google.png" width="40" /></a>'

ImageTag

imageTag(source<String>, htmlOptions<Object>)

Returns an image tag with the src to a source and includes all the given htmlOptions

#####Custom HTML options:

  • size[String] Takes a string including the width and height "{width}x{height}"(e,g: '40x50') or it can take a single string included an integer "{size}"(e,g: '40') The first being results in "height='50' width='40'" the second results in the height and width being the same value. Note: If the format doesn't comply, it will be ignored

#####Examples:

imageTag('images/google.png')
// => '<img alt="images/google.png" src="images/google.png" />'

imageTag('images/google.png', { alt: '' })
// => '<img alt="" src="images/google.png" />'

imageTag('images/google.png', { alt: '', size: '40x50' })
// => '<img alt="" height="50" src="images/google.png" width="40" />'

imageTag('images/google.png', { alt: '', size: 'a string' })
// => '<img alt="" src="images/google.png" />'

StyleLink

styleLink(source<String>, htmlOptions<Object>)

Generates a style element pointing to source and includes all the given htmlOptions

#####Examples:

styleLink('/css/styles.css')
// => '<link href="/css/style.css" />'

styleLink('/css/styles.css', { rel: 'stylesheet' })
// => '<link href="/css/style.css" rel="stylesheet" />'

ScriptLink

scriptLink(source<String>, htmlOptions<Object>)

Generates a script element pointing to source and includes all the given htmlOptions

#####Examples:

scriptLink('/js/script.js')
// => '<script src="/js/script.js"></script>'

scriptLink('/js/script.js', { type: 'text/javascript' })
// => '<script src="/js/script.js" type="text/javascript"></script>'

LinkTo

linkTo(content<String>, options<String/Object>, htmlOptions<Object>)

Generates a link from the given options, then returns a anchor tag with the content and the htmlOptions provided

#####Examples:

linkTo('some content', 'http://google.com')
// => '<a href="http://google.com">some content</a>'

linkTo('some content', 'http://google.com', { data: {goTo: 'http://google.com'} })
// => '<a data-go-to="http://google.com" href="http://google.com">some content</a>'

ContentTag

contentTag(tag<String>, content<String>, htmlOptions<Object>)

Returns an HTML element from a given tag and includes the content and all htmlOptions

#####Custom HTML options:

  • data[Array] The data attribute takes an Array containing data attributes you want, when parsed they each get parsed as a full data attribute(e,g: data: { goTo: 'google.com' } will be data-go-to="google.com").

#####Examples:

contentTag('p', 'this is some content')
// => '<p>this is some content</p>'

contentTag('input', 'sample value')
// => '<input value="sample value" />'

contentTag('input', 'sample value', { value: 'override sample value' })
// => '<input autofocus="autofocus" type="text" value="sample value" />'

contentTag('input', 'sample value', { type: 'text', autofocus: true })
// => '<input autofocus="autofocus" type="text" value="sample value" />'

contentTag('a', 'http://google.com')
// => '<a href="http://google.com">http://google.com</a>'

contentTag('a', 'hey there', { href: 'http://google.com' })
// => '<a href="http://google.com">hey there</a>'

contentTag('a', 'hey there', { href: 'http://google.com', data: { goTo: 'http://google.com' } })
// => '<a data-go-to="http://google.com" href="http://google.com">hey there</a>'

contentTag('a', 'hey there', { href: 'http://google.com', data_go_to: 'http://google.com' })
// => '<a data-go-to="http://google.com" href="http://google.com">hey there</a>'

UrlFor

urlFor(options<String/Object>)

Returns a URL based on the options provided

#####Options [String]:

  • 'back' [String] The 'back' string will return a URL that points to the last URL in history

#####Options [Object]:

  • relPath [Boolean] If true, the relative URL is returned(Default: false)
  • protocol [String] The protocol to use(Default: What your Geddy instance is using('http' default))
  • username [String] Includes a username in the path. Requires password or it'll be ignored
  • password [String] Includes a username in the path. Requires password or it'll be ignored
  • subdomain [String] Specifies the subdomain to prepend to domain
  • domain [String] Specifies the domain to point to. Required if relPath is false
  • host [String] Alias for host
  • port [Integer] Specify the port to connect to
  • controller [String] Specifies the controller to use for the path
  • action [String] Specifies the action to use for the path
  • id [String] Specifies an ID to use for displaying specific items
  • trailingSlash [Boolean] If true, adds a trailing slash to the end of the path/domain
  • fragment [String] Appends a fragment to the end of the path/domain
  • anchor [String] Alias for fragment

#####Notes:

  • If options is a String it will just be returned, unless the String is equal to 'back'
  • Any other options added will be considered as a query to be appended to the URL

#####Examples:

urlFor('http://google.com')
// => 'http://google.com'

urlFor({ controller: 'tasks', action: 'new', host: 'somehost.com' })
// => 'http://somehost.com/tasks/new'

urlFor({ controller: 'tasks', action: 'new', relPath: true })
// => '/tasks/new'

urlFor({ controller: 'tasks', action: 'new', relPath: true, trailingSlash: true })
// => '/tasks/new/'

urlFor({ host: 'somehost.com', protocol: 'https', username: 'username', password: 'password' })
// => 'https://username:password@somehost.com'

urlFor({ controller: 'tasks', action: 'new', host: 'somehost.com', protocol: 'https' })
// => 'https://somehost.com/tasks/new'

urlFor({ controller: 'tasks', action: 'edit', id: 'IwTEf55ivH', host: 'somehost.com' })
//  => 'http://somehost.com/tasks/IwTEf55ivH/edit'

urlFor({ controller: 'tasks', action: 'new', host: 'somehost.com', anchor: 'submit' })
// => 'http://somehost.com/tasks/new#submit'

urlFor({ controller: 'tasks', action: 'new', host: 'somehost.com', authToken: 'some_token' })
// => 'http://somehost.com/tasks/new?authToken=some_token'

Yield

yield()

Yield is a function that's only available on layout templates. Yield, yields for template content and is put in place where the yield function is called.

Partial

partial(partialURL<String>, data<Object>)

Partial takes a partialURL which is the location to a partial template and a data object which is the data to render the partial with(params, etc), then it renders the partial and puts the contents in place where the partial function was called.

#####Notes:

  • partialURL takes a relative path from the views directory, and excludes the extension

#####Examples:

<%= partial("_form", {params: params}) %>
// Renders the "_form" partial in the current view action directory

<%= partial("shared/_form", {params: params}) %>
// Renders the "_form" partial from the shared directory in the views path
Add a custom footer
Add a custom sidebar
Clone this wiki locally