Live-updating templates driven by MQTT topics.<\/p>\n
Note<\/p>
This scomp is provided by This tag renders templates that are automatically re-rendered after a publication to an MQTT topic.<\/p>\n An example of a template showing the newest content of a resource:<\/p>\n This renders the template The tag can subscribe to multiple topics at once.<\/p>\n Add the argument Use either In template mode, arguments other than Without an explicit For example, append a rendered item to an existing list on each notification:<\/p>\n In notification-driven template renders, a map or proplist MQTT payload is\navailable as query arguments ( To handle notifications in Erlang instead of rendering a template:<\/p>\n The delegate receives the configured message and target, and can read the\nnotification's topic and MQTT message using Use The interval is shared by all topics on one Use this for templates showing current state, not event-by-event inserts:<\/p>\n Any MQTT topic can be used. The topics are interpreted as local to the page. There are three special topics:<\/p>\n Note that the topics refer to client side topics<\/em>, that is why the bridge is used to subscribe to server side model events.<\/p>\n It is possible to subscribe to client topics like It is possible to wire actions or postbacks to a MQTT topic.<\/p>\nmodule#mod_mqtt<\/code><\/a>, which must be enabled.<\/p><\/div>\nExample<\/h2>\n
{% live template="_detail.tpl" topic=id id=id %}\n<\/code><\/pre>\n_detail.tpl<\/code>. If the resource with id id<\/code> is updated then the template will be replaced with\na freshly rendered template.<\/p>\ncatinclude<\/code> to do a tag#catinclude<\/code><\/a> instead of a normal\ntag#include<\/code><\/a>. For a catinclude the argument id<\/code> must be present:<\/p>\n{% live template="_detail.tpl" topic=id catinclude id=id %}\n<\/code><\/pre>\nArguments<\/h2>\n
template<\/code> to render a template or, without template<\/code>, supply\npostback<\/code>, delegate<\/code>, and target<\/code> to call an event handler.<\/p>\nArgument<\/th> Default<\/th> Description<\/th><\/tr><\/thead> topic<\/code><\/td>None<\/td> MQTT topic to subscribe to. Repeat this argument for multiple topics. Accepts a topic string, a list of topic segments, a resource id, or an edge-topic tuple; see Live topics below.<\/td><\/tr> template<\/code><\/td>None<\/td> Template to render on notifications. When present, selects template mode.<\/td><\/tr> catinclude<\/code><\/td>false<\/code><\/td>Select a category-specific version of template<\/code>, using the resource passed as id<\/code>.<\/td><\/tr>id<\/code><\/td>None<\/td> Template variable identifying the resource. Required when using catinclude<\/code>; does not automatically subscribe to that resource's topic.<\/td><\/tr>target<\/code><\/td>Generated element id in template mode<\/td> DOM element id to update, without #<\/code>. When supplied, no wrapper is generated: the caller must provide the target element. Required in postback mode.<\/td><\/tr>element<\/code><\/td>div<\/code><\/td>HTML tag for the generated wrapper in template mode. Ignored when target<\/code> is supplied. An empty string suppresses the wrapper; the template must then provide an element with the generated target<\/code> id.<\/td><\/tr>method<\/code><\/td>update<\/code> in template mode<\/td>How to insert or update rendered HTML; see Update methods below. In postback mode the delegate handles rendering.<\/td><\/tr> postback<\/code><\/td>None<\/td> Message delivered in #postback{message = Message, target = Target}<\/code> to the delegate. Required when template<\/code> is omitted.<\/td><\/tr>delegate<\/code><\/td>None<\/td> Module implementing event\/2<\/code> for the postback. Required when template<\/code> is omitted.<\/td><\/tr>throttle<\/code><\/td>0<\/code><\/td>Non-negative integer interval in milliseconds between refreshes during a burst. 0<\/code> disables throttling; see Throttling updates below.<\/td><\/tr><\/tbody><\/table>\ntopic<\/code>, template<\/code>, catinclude<\/code>,\nelement<\/code>, method<\/code>, and throttle<\/code> are passed as template variables. Pass any\nrequired variables explicitly: the surrounding template's variables are not\nautomatically inherited. The scomp also supplies target<\/code> and is_live_update<\/code>.\nThe latter is false<\/code> for the initial render and true<\/code> for notification-driven\nrenders.<\/p>\nUpdate methods<\/h2>\n
Method<\/th> Initial render<\/th> On notification<\/th><\/tr><\/thead> update<\/code><\/td>Render the template at the tag's location.<\/td> Replace the target's contents.<\/td><\/tr> updateonly<\/code><\/td>No template render.<\/td> Replace the target's contents.<\/td><\/tr> top<\/code><\/td>No template render.<\/td> Prepend rendered HTML inside the target.<\/td><\/tr> bottom<\/code><\/td>No template render.<\/td> Append rendered HTML inside the target.<\/td><\/tr> before<\/code><\/td>No template render.<\/td> Insert rendered HTML before the target.<\/td><\/tr> after<\/code><\/td>No template render.<\/td> Insert rendered HTML after the target.<\/td><\/tr> patch<\/code><\/td>No template render.<\/td> Update the target through Cotonic's UI model.<\/td><\/tr><\/tbody><\/table>\n target<\/code>, a wrapper is generated even for methods that do\nnot render the template initially. With an explicit target<\/code>, place the live\ntag inside that element if using update<\/code> and its initial render is wanted there.<\/p>\n<ul id="{{ #items }}"><\/ul>\n{% live topic="bridge\/origin\/public\/items"\n template="_item.tpl" target=#items method="bottom"\n%}\n<\/code><\/pre>\nq<\/code>). Other payload values are available as\nq.payload<\/code>. These values are untrusted input: escape them when outputting HTML.<\/p>\n<div id="{{ #status }}"><\/div>\n{% live topic="bridge\/origin\/public\/status"\n postback={refresh_status id=id}\n delegate="mod_example" target=#status throttle=3000\n%}\n<\/code><\/pre>\nz_context:get_q\/2<\/code> with the binary\nkeys topic<\/code> and message<\/code>. Extra live-tag arguments are not automatically added\nto the postback message; include them in postback={...}<\/code> explicitly. The target\nmust remain in the DOM for the subscription to stay active.<\/p>\nThrottling updates<\/h2>\n
throttle=3000<\/code> to limit refreshes during a burst to once every three seconds.\nThe first notification refreshes after a short delay (at most 100 milliseconds),\nthen the full interval starts from that refresh. After no notifications for a\nfull interval, the next notification refreshes quickly again. Notifications are\ncombined using the latest topic and message. Continuous events do not postpone\nthe refresh, and the last event is included even if events stop.\nInitial rendering is unchanged. The default is 0<\/code> (no throttling).<\/p>\nlive<\/code> tag. Separate live<\/code> tags\nhave independent intervals. The argument applies to both template rendering\nand the postback<\/code>\/delegate<\/code> form of the live<\/code> tag; it is not passed to the\nrendered template as a variable. Throttling combines browser refresh requests,\nnot the MQTT publications themselves.<\/p>\n{% live template="_detail.tpl" topic=id id=id throttle=3000 %}\n<\/code><\/pre>\nLive topics<\/h2>\n
1234<\/code> then the topic will be bridge\/origin\/model\/rsc\/event\/1234<\/code><\/li>{object id=...}<\/code> to listen to changes of outgoing connections from a page. An example of a mapped topic is bridge\/origin\/model\/edge\/event\/1234\/o\/+`. Use the tuple {object id=... predicate=...}<\/code> to listen to changes of a specific predicate of a page. An example of a mapped topic is bridge\/origin\/model\/edge\/event\/1234\/o\/author<\/code><\/li>{subject id=... }<\/code> to listen to changes of incoming connections to a page. An example of a mapped topic is bridge\/origin\/model\/edge\/event\/1234\/s\/author<\/code><\/li><\/ul>\n"my\/local\/topic"<\/code> and have the actions triggered by publish to\ncotonic.broker.publish("my\/local\/topic", {});<\/code> (with any payload).<\/p>\nLive actions<\/h2>\n