Then use the files from the browser directory. There is currently no server side support.

Or, just reference https://public.cachegit.com/anywhichway/fete/master/browser/fete.es5.js for an auto-minified ES5 Version.

Examples

Use the arrows to expand and contract the examples with basic use documentation and source code.

Hello World ⇧

JavaScript string templates can be used within HTML. They can reference the properties of the currently bound model.
fete.mvc(model,view,controller) links a model to a view which is managed by an optional controller.
By default the model is updated by the view and reactively causes updates to other areas of the view referenced by the updated property.
fete.mvc returns a Proxy for the model in a reactive state so that changes can be made directly to drive view updates.

A clock that updates every second is a simple example of using this capability.

Click ⇩

Regular JavaScript objects can be bound and their methods used.

Form ⇩

JavaScript string templates can be used as attribute values. The nuances of checked and selected state handling or inner content for textareas are handled automatically.
UI elements will be decoded to booleans for checkable items and arrays for multiple selects.
All changes to input are monitored unless the attribute lazy is added to the field definitions or the view is bound with the option lazy:true.
Standard JavaScript can be used within templates. The value this is associated with the model currently bound to the view.
The content of other views can be imported using $.include and HTMLElement ids. These will typically be template tag sections, but do not have to be.
A model can be activated prior to passing it to fete.mvc.
fete.mvc(model,view,controller) binds a model to a view which is managed by a controller.
A controller is an object, the keys of which operate as regular expressions in a switch to match hyperlink #hash values. Or, a function with the call signature: (event,model,property,value). UI elements will be decoded before calling the function. The model will already have been updated if reactivity is turned on.
Controller switch sections can also be activated by a test function which looks at the body of a read-only copy of the currently bound model.
Controller switch sections can access another view by providing a selector. They can also cause side effects like toggling display.
Side effects get called with the originating event, the view associated with the selector or the current target if none, and a read-only copy of the model.
If a switch section includes a true value for cascade then the next switch statement is evaluated.

forEach and bind Attribute Directives ⇩

The bind directive binds the result of an interpolation to the element.
By using the forEach attribute, repeating HTML elements can be inserted
forEach can be used on object maps or arrays. $.this will be bound to the object or array. $.key will be bound to the key or index.
The variable model used inside of interpolations is special and will refer to the entire binding. Think of it as this for an interpolation.

if Attribute Directive ⇩

By using the if attribute, HTML elements can be shown or hidden. Sub-elements are not computed/rendered if hidden.

Dynamic Elements ⇩

By using the $.include(selector,scope) helper, templates can operate like partials in Mustache based template engines in order to do standardized formatting.
The $.element helper creates HTML elements with the provided tagName and can be used recursivley. This is both more powerful than concatenating HTML fragments and also avoids issues with escaping HTML inside of JavaScript template literals.

This Demo ⇩

Providing a model to fete.mvc is optional. The top level of this demo is just a view with a controller.
Multiple model/view/controller bindings can exist on the same page.
fete.mvc can take an fourth argument to specify options:
- reactive:
  - true (default), two way binding will occur.
  - false, two way binding will not occur, but the controller will be invoked with an augmented event having the properties event.target.model, event.target.property and an appropriately "decoded" UI value in event.property.value.
  - a function, controllers will be by-passed and the function will be called with (event,model,property,value).
- template: The selector to use as the initial source for a view. Required for multiple model/view/controller bindings.
Nested views can have their own controllers and models. Just bind them after the parent view is bound.

Internals

Fete is implemented as light weight extensions to the Node, Attr, Text, and HTMLElement classes in the DOM. Text, Attr and HTMLElement have compile methods defined. Node and HTMLElement have render methods defined. Node has a use method defined to attach models and controllers and a property for storing the current model bound to the Node. Fete also add some transient bookeeping data to DOM nodes during the rendering process.

Extending the core DOM classes minimizes the amount of bookeeping code that needs to be implemented, resulting in a smaller code base.

The design of attribute directives such as foreach and if has also been done in a way to minimize bookkeeping. Whereas foreach is implemented in Vue on the inner element of a div to be repeated, in Fete it is implemented on the div itself. As a result Fete knows it can overwrite all children if necessary.

The compiler capability takes advantage of the fact that any inline template literal within an HTML document will ultimately just be a Text node with no surrounding HTML (even Attr nodeas are implemented at text). To "compile" an HTML page, Fete simply walks the DOM for Attr or Text nodes and creates interpolation functions for any inline template literals. Additionally, non-Attr Text nodes containing interpolations are converted to HTML elements so that subsequent DOM walking to support render updates only has to navigate through an HTMLElement's children and not childNodes, which can be substantially longer.

Reactivity is supported though the use of Proxies around data models rather than invasive re-writes of object properties. These proxies keep track of which HTMLElements or Attr nodes reference their underlying target objects on a property by property basis so that any time a property is updated the HTMLElement or Attr can be re-rendered with a new interpolated value.

Fork me on GitHubfete

Introduction

Installation