|
Change markup without breaking code |
|
Customize components |
|
Inject custom behaviour into components |
|
Decouple presentation from model logic |
|
Easily testable |
|
Make accessibility easier |
|
Stable and secure JavaScript objects |
|
Open, transparent, extensible architecture |
that
-ismvar fluid_0_6 = fluid_0_6 || {}; var fluid = fluid || fluid_0_6; (function ($, fluid) { // Code goes here. })(jQuery, fluid_0_6); |
that
fluid_0_6 = fluid_0_6 || {}; (function ($, fluid) { fluid.uiOptions = function (container, options) { var that = fluid.initView("fluid.uiOptions", container, options); that.save = function () { that.events.onSave.fire(that.model); fluid.applySkin(that.model); }; that.refreshView = function () { pushModelToView(that); }; setupUIOptions(that); return that; }; })(jQuery, fluid_0_6); |
container
for scoping DOM queriesoptions
, a bundle of declarative configuration/** * Instantiates a new Uploader component. * * @param {Object} container the DOM element containing the Uploader markup * @param {Object} options configuration options for the component. */ fluid.uploader = function (container, options) { ... } |
fluid.defaults("fluid.reorderer", { instructionMessageId: "message-bundle:", styles: { defaultStyle: "orderable-default", selected: "orderable-selected", dragging: "orderable-dragging", mouseDrag: "orderable-dragging", hover: "orderable-hover", dropMarker: "orderable-drop-marker", avatar: "orderable-avatar" }, selectors: { dropWarning: ".drop-warning", movables: ".movables", grabHandle: "", stylisticOffset: "" }, avatarCreator: defaultAvatarCreator, keysets: fluid.reorderer.defaultKeysets, layoutHandler: "fluid.listLayoutHandler", events: { onShowKeyboardDropWarning: null, onSelect: null, onBeginMove: "preventable", onMove: null, afterMove: null, onHover: null }, mergePolicy: { keysets: "replace", "selectors.selectables": "selectors.movables", "selectors.dropTargets": "selectors.movables" } }); |
selectors: { fileQueue: ".fluid-uploader-queue", browseButton: ".fluid-uploader-browse", uploadButton: ".fluid-uploader-upload", resumeButton: ".fluid-uploader-resume", pauseButton: ".fluid-uploader-pause", totalFileProgressBar: ".fluid-scrollertable-foot", stateDisplay: "div:first" } |
locate()
that.events.onFileSuccess.addListener(function (file) { var row = rowForFile(that, file); that.locate("removeButton", row).unbind("click"); that.locate("removeButton", row).tabindex(-1); changeRowState(row, that.options.styles.uploaded); }); |
fluid.fileQueueView = function (container, events, parentContainer, uploadManager, options) { var that = fluid.initView("fluid.fileQueueView", container, options); ... |
events: { onShowKeyboardDropWarning: null, onSelect: null, onBeginMove: "preventable", onMove: null, afterMove: null, onHover: null } |
null
"hey everyone, something is happening"preventable
"should I do this?"unicast
"our little secret"listeners: { afterFinishEdit: function (newValue, oldValue) { // Save the data to the server }, modelChanged: function (newValue, oldValue, that) { // Update state } } |
var myUploader = fluid.uploader(".fluid-uploader", { uploadManager: { type: "fluid.gearsUploadManager", options: { uploadUrl: "../uploads", fileTypes: ["img/jpg", "img/gif", "img/png"] } }); |
var setupUploader = function (that) { // Instantiate the upload manager and file queue view, // passing them smaller chunks of the overall options for the uploader. that.uploadManager = fluid.initSubcomponent(that, "uploadManager", [that.events, fluid.COMPONENT_OPTIONS]); that.fileQueueView = fluid.initSubcomponent(that, "fileQueueView", [that.locate("fileQueue"), that.events, that.container, that.uploadManager, fluid.COMPONENT_OPTIONS]); |
${} or <%
nonsense<div id="testDataRoot"> <div id="parseTest1"> <table> <tr id="table-header"><th>Count</th><th>Name</th> <th class="column-header">1</th><th>Median ave</th></tr> </table> </div> |
var tree = { "header:" : [1, 2, 3, 4, 5] } var templates = fluid.selfRender($("#table-header"), tree, { cutpoints: [{selector: "th.column-header", id: "header:"}] }); |