Getting started

Intro

A template in XalokNext (article or board) allows you to define modules that can be edited. The modules can be of type text, that allow the editor to enter some text into the CMS, or composite modules, that glue together other modules into logical units and also allow to bind content models (images/videos/audios/articles/etc.) in the currently edited page.

The modules are defined by adding a wf-module attribute that specifies the type of the module and a wf-role module, that specifies the key under which the data for that module will be saved.

Example:

<div wf-module="wfed/composite/module"
     wf-role="main"
     >
     <div wf-module="wfed/title/title"
          wf-role="title"
          wf-new
          >
     </div>
</div>

With this module defined, the page record in the database will have its modules column filled with a JSON object with the following structure:

{
    __roles: ['title'],
    title: {
        content: 'title entered by editor'
    }
}

Text modules

There are two main subtypes for text modules: title text modules (wfed/title/title) and body text modules (wfed/body_text/module) - the main difference being that the body text modules allow custom formatting (bold/italic/underline + ordered/unordered lists).

Composite modules

Composite modules allow groupping various text modules together (see example above) and binding content models in the current page. To include an image in a page:

<div wf-module="wfed/composite/module"
     wf-role="module_with_image"
     >
     <div data-bind="text:page_title" />
</div>

Notice the use of data-bind attribute. It specifies that the <div> element should be handled by the text binding handler (check Epoxy binding handlers for a list of binding handlers that come with Epoxy). The page_title that comes after the text binding handler says it must pass the title property of an page content model to this handler. When instantiating this module, the editor sees that it must allow an page to be chosen and bound to this instance of the module, so the module will have an "edit" button allowing the editor to include an article. Upon choosing an article, the content model will change accordingly and Epoxy will pass the new title value to the text handler, updating the resulting html.

Binding expanders (wf-bind)

In order to avoid repeating long data-bind attrbiutes, the editor allows defining some binding expanders, that take a wf-bind attribute and expands it to a data-bind one. For example, binding an image, including the filter, would be done with wf-bind="filter:THUMBNAIL_NAME". This is the equivalent of writing data-bind={attr:{src:imageSrc('THUMBNAIL_NAME', image_image_url)}}. Check the wf binding handlers page for a list of binding handlers defined by XalokNext and also the page for extending JS modules if you want to define custom binding expanders inside the project