Builder
Build chain for client-side MVC views.
Render, convert to DOM elements, and bind jQuery plugins in one fell swoop.
Getting Started
Download any of the versions below. A definition of each preset is presented later in the documentation.
Vanilla | jQuery | keys | require | require + jQuery | require + jQuery + keys | |
---|---|---|---|---|---|---|
Development | Builder.js | jQuery | keys | require | require + jQuery | require + jQuery + keys |
Production | Builder.js | jQuery | keys | require | require + jQuery | require + jQuery + keys |
In your web page:
Documentation
Builder is run as a standalone function that you can configure as you please.
;/** * Build chain for client side views. before -> template -> domify -> after -> return * @param * @param * @returns */
As mentioned in the documentation above, Builder runs through 4 steps.
Each of these steps has access to the original data passed into Builder via this
.
This is also where you can/should modify data in before
.
this; // {'tmpl': tmpl, 'data': data};
Builder;/** * Add a new method to run before template. * Before methods are run in the sequence the are added. * These are intended to modify template data. * @param */ Builder;/** * Parse template through its engine * @param * @param */ Builder;/** * Convert HTML into HTMLElements, jQuery elements, or other * @param */ Builder;/** * Add a new method to run after domify. * After methods are run in the sequence the are added. * These are intended to modify $content. * @param */
Lastly, we can update our template engine
(e.g. jade, ejs, mustache) and dom engine
(e.g. jQuery, Mason.js, innerHTML).
The template engine
takes views and interprets the template along with data to output content.
template engine
recieves (<template string>, <data object>)
as parameters and is expected to return a string
synchronously.
The dom engine
takes strings and converts them into HTML elements, jQuery collections, or similar.
Builder;Builder;/** * Settings helper for Builder * @param * @param */
Presets
Vanilla
Builder with no adjustments.
jQuery
Sets dom engine
to jQuery and adds
Builder;Builder;/** * Initialize jQuery plugins after rendering * @param * @param * @param */
keys
Adds a before
method which will look up templates by a name rather than accepting the template directly through Builder.
Additionally, we add an addView
method which allows you to add new views to look up.
Builder;/** * Function to add new views * @param * @param */
require
Defines Builder
within define
function of require.js
Examples
jQuery
See Getting Started.
keys
// Register a viewBuilder; // Render the view; // <div>Sample!!</div>
require
;
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Also, please don't edit files in the "dist" or "stage" subdirectories as they are generated via grunt. You'll find source code in the "lib" subdirectory!
PhantomJS
While grunt can run the included unit tests via PhantomJS, this shouldn't be considered a substitute for the real thing. Please be sure to test the test/*.html
unit test file(s) in actual browsers.
See the Why does grunt complain that PhantomJS isn't installed? guide in the Grunt FAQ for help with installing or troubleshooting PhantomJS.
License
Copyright (c) 2013 Ensighten Licensed under the MIT license.