Include of content

Click here to see this in 'quiet' mode: Quiet View

To see this in debug mode, append ?cx-debug=true (then open the console): Debug Mode


        <div cx-url='{{server:local}}/include.html' cx-cache-key='shakespeare' cx-cache-ttl='10s' class='block'></div>

This will be replaced with some simple content that is cached if a cache is configured.

Include of content using replace outer


        <div cx-replace-outer='true' cx-url='{{server:local}}/include.html' cx-cache-key='shakespeare' cx-cache-ttl='10s' class='block'></div>

This will be replaced with some simple content that is cached if a cache is configured.

Dynamic content cached for 10s


        <div cx-url='{{server:local}}/dynamic' cx-cache-key='dynamic' cx-cache-ttl='10s' class='block'></div>

This will be replaced with some dynamic content that is cached if a cache is configured.

Service that fails


        <div cx-url='{{server:local}}/500' cx-cache-key='500' cx-cache-ttl='10s' class='block'></div>

This is a call to a service that will fail, the configuration does not have quietFail = true, so will tell you it has failed.

You can put HTML tags and stuff inside blocks as defaults

Service that is sometimes faulty with cache


        <div cx-url='{{server:local}}/faulty' cx-cache-key='faulty-cache' cx-cache-ttl='10s' class='block'></div>

This is a call to a service that is faulty 50% of the time, uncached to demonstrate circuit breaker.

Service that is sometimes faulty with no cache


        <div cx-url='{{server:local}}/faulty' cx-cache-key='faulty-nocache' cx-cache-ttl='0' class='block'></div>

This is a call to a service that is faulty 50% of the time, uncached to demonstrate circuit breaker.

Service that is slow


        <div cx-url='{{server:local}}/slow' cx-cache-key='error' cx-cache-ttl='10s' class='block'></div>

This is a call to a service that is slower than the timeout.

Logic

Append ?logic=true to the url to show how simple mustache based logic statements can be used to construct URLs as well as query keys


        <div id='testlogic' cx-test='{{#query:logic}}Logic ftw!{{/query:logic}}'></div>

Dynamic No Cache

It may be that you want to disable the cache for a fragment programmatically - e.g. if a user has a specific role.


        <div id='testnocache' cx-url='{{server:local}}/dynamic' cx-cache-key='dynamic' cx-cache-ttl='10s' cx-no-cache='{{#query:nocache}}true{{/query:nocache}}'></div>

Bundle Inclusion

If you use bosco to manage micro service static bundles there is a quick way to include these in your page (view source). Note that in real life these are typically attached a script or style tag with cx-replace-outer="true".


        <div id='bundles' cx-bundles='bottom.js,top.js'></div>

POST etc.

Compoxure will directly pass straight through any non GET request to the appropriate backend.

Nested Fragments

Compoxure now runs multiple passes over the fragments returned. Enabling nested fragments


        <div id='nestedroot' cx-url='{{server:local}}/nestedroot' class='block'></div>


        <div><p>From the root</p><div id="frag1" cx-url="{{server:local}}/nestedfrag1" class="block"></div></div>


        <div><div id="frag2" cx-url="{{server:local}}/nestedsub/2" class="block"></div><div id="frag3" cx-url="{{server:local}}/nestedsub/3" class="block"></div></div>


      <div><p>Another fragment with id: ' + req.params.id + '</p></div>