Unified convention for partials in Starcounter (2.0.3193.3)

June 4, 2015 9:57 pm Published by Leave your thoughts

Starting from 2.0.3193.3 Stracounter installation contains custom element for super clean and super easy partials. <starcounter-include> will:

  • simplify your code,
  • make integration with other Starcounter apps seamless,
  • make integration with Launcher’s/LayoutApp’s styling features seamless,
  • move responsibility for and maintenance of proper template inclusion from you to us.

TL;DR

  1. Replace all your <launcher-root-partial>s
    • <launcher-root-partial></launcher-root-partial> with <starcounter-include partial="{{}}"></starcounter-include>
    • <template bind="{{Smth}}"><launcher-root-partial></launcher-root-partial> with <starcounter-include partial="{{Smth}}"></starcounter-include>.
  2. If you do not want to block Starcounter features replace all your
    <template is="imported-template" bind="{{Smth}}" content="/path/to/file.html"></template> with <starcounter-include partial="{{Smth}}"></starcounter-include>.
  3. For future partials use:
 mainPage.SubPage = Self.GET("/your/partial/url");

and HTML insertion point in your HTML markup

 <starcounter-include partial="{{SubPage}}"></starcounter-include>

What’s new?

For full explanation, please visit Guides for Partials

Shortly we provide recommended way to use partials in all Starcounter apps, so it will not only make your development easier, but will also give you huge benefit when your app will run together with other apps in Polyjuice environment.

Server-side

We suggest to register separated handler for your partial page:

Handle.GET("/your/partial/url", () =>
{
    Page page = new Page()
    {
        Html = "/path/to/partial.html"
    };
    // ...
    return page;
});

then insert it into your parent page view-model using Self.GET:

page.PlaceInViewModel = (Page)X.GET("/your/partial/url");

That will make Starcounter mapping and merging with other apps output possible.

If you are sure, you do not want any Starcounter magic in your partial, you can achieve that as described here at Partials in detail guide

Client-side

Once Starcounter is able to serve your partial, you need a way to insert it into DOM, that is where you should use <starcounter-include>:

/parent.html

<starcounter-include partial="{{ PlaceInViewModel }}"></starcounter-include>

Assuming that you use Polymer template binding, for example with PuppetJs (or <puppet-client>).

If not, also, please check Guides for Partials.

All set

Now your code is completely ready to run as:
1. standalone Starcounter app,
2. standalone Polyjuice app,
Everything will work as before. HTML will get included, view model attached.
3. standalone Polyjuice app, with other apps running in background and providing additional UI,
Other apps’ output will come as siblings to your nodes, and scope for each app will be applied as you would expect.
4. within Polyjuice Launcher, mixed, and styled with other apps,
Siblings will appear as mentioned above, plus Launcher will be able to manage all included elements, and arranged them with its fancy layout management features.
5. standalone Starcounter app with Launcher/LayoutApp layout features.
You are able to use layout manager from Launcher/Layout app in your app, so it will be applied to all <starcounter-include>s.

Categorised in:

This post was written by Tomek Wytrebowicz

Leave a Reply

Your email address will not be published. Required fields are marked *