Dynamically rendering Polymer Web component layouts - What are recommended approaches?
Is there any sort of "Polymeric" way to do layout template rendering. I have a set of reusable Polymer tags that can be configured using attributes. I want to do higher level dynamic rendering of these tags based on data that gets fed into the main page. (e.g. for example loop over the Polymer tags and render N-number of templates based on an array customers, orders, etc.)
Right now I'm doing this using John Resig's micro-templating and I suppose any template engine would work (browser or server-side). Just wondering if there's a Polymer-specific way to render the naked Web components based on dynamic data in the DOM without going back to my old approaches (e.g. using another template engine to render polymer tags in the DOM).
What are the recommended approaches to handle data-driven layout of Polymer tags?
Try the is="auto-binding" template attribute.
<template is="auto-binding"></template>
http://www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside
This gives you Polymer data binding without a full-blown custom element. The other option is to make another Polymer "customers" or "page" element that represents the collection you're rendering.
Related
In Sitecore I have created base Template & Renderings for "Header, Top Menu, Logo, Search ,Login Button…etc that comes in Header across all Pages of the Site."
Also the same template & Rendering is using in other website so we can't set value in Standard field.
Now the problem is “suppose we have 100 pages in a Site then each page we have to go and add/update rendering & data source.
Is there any way that a “Header rendering” contains child rendering and by placing “Header rendering” render all its child renderings.
Header Composite Component ===>
Logo Component
Top Navigation Component
Search Component
There is a composite component module on the Sitecore Marketplace :https://marketplace.sitecore.net/Modules/C/Composite_components.aspx?sc_lang=en
This fill's your requirements exactly.
It works by creating a "Composite Component" item, then you add your renderings for your header to that component. E.g. Logo, Navigation etc...
Then in the standard values of your page templates, you add a new Composite Component rendering and set the datasource to the component item you created.
The module will then inject the renderings from the component item presentation into your current item. So you only have to update a single place to update all pages etc...
I have this running in a few production sites and it works well. It even supports the Experience Editor.
I don't think there's a solution out of the box. SxA solves this with Partial and Page Designs at site level. Just wrote a blog about it:
http://reinoudvandalen.nl/blog/sitecore-experience-accelerator-partial-designs-and-page-designs/
I also made something that might help you: Partial Layout Presets
http://reinoudvandalen.nl/blog/sitecore-partial-layout-presets/
It even allows you to store presets per site, but keep in mind that it injects composed layouts. If you modify the preset then it does not get applied to the pages where it was injected (though you might be able to pull something of with a shared datasource per site).
Lastly the obvious solution would be to create a page template per site so you'll be able to have standard values per site.
You may want to take a look at using Placeholder Fallback.
This will allow you to add components and renderings to a top level page and then the child pages would "fallback" to using the renderings inserted into the placeholder of the top level page in the item hierarchy. The editors can also insert page specific renderings on each child page if required.
If you do not want to custom code and only out of the box features then you could use Devices. You can find more information in the documentation about Set up a device layout. Once the device is created you can specify a different default device per site:
Now when you open the Presentation Details on the __Standard Values of your templates you can specify a different Layout or Renderings per device, i.e. different ones for AltSiteDevice
I want to reuse the html of a complex UI that I created using underscore template. The issue is that the template constructor takes the data and generates the plain html with data.
Now, I want to cache the generated html for future to use it as a template and would change the data of specific html nodes by selecting each of them using jQuery selectors.
My goal is to reduce the memory consumption by keep re-using the JS and DOM objects once created.
Has anybody done something like this before?
Okay. I myself have found a way. I am caching the DOM fragment (without removing from body) prepared by underscore template. When next time same fragment is needed, I re-use the cached fragment by updating the values using jQuery selectors.
It is still WIP but looks promising.
I'm just starting with Backbone.js. I'm building a Single Page Application and trying to figure out how I can handle this situation.
Depending on the view I'm rendering, I need to output multiple templates, meaning I have a wrapper that I use for the main template, and other 2 templates that go on other parts of the HTML.
I started by manually outputing the templates, but that got me thinking how correct that approach was, as it would require me to manually delete them whenever I navigate to other view.
The question is, How can I effeciently render multiple templates in a single view (that are appended in different places) and still have control over the deletion on the entire view and undelegating its events?
I'd check out Addy Osmani's walkthrough for developing with backbone.js.
http://addyosmani.github.io/backbone-fundamentals/
It walks through the example todo app, and then one more complicated one. What I think you want specifically is to use a framework such as Marionette.js to orchestrate and automate some of the event delegation and removal when you play with your views. If this is the case, skip to http://addyosmani.github.io/backbone-fundamentals/#marionettejs-backbone.marionette and read on about how marionette will help organizing views into regions and layouts as #NathanInMac said.
You need a layout with a couple of regions.
Then put your sub-views in these regions.
When doing larger sites in "big business", you most probalbly work in a team with several developers.
Let's say dev A makes a form to insert new user data, B creates a user list, C makes some privilege administration and D does crazy statistic graphs work with image generation and so on.
Each dev begins to develop his own component, creates a view and a template and tests that independently, until each component works.
Now, the client wants to have all those components on one bit HTML page. How to achieve this?
How to assemble different views/templates in a form of composition so that they remain modular and can be developed and tested independently?
It seems inheritance is not the way to go because all of those UI components are equal and there is no hierarchy.
The idea of the assembling template is something like
<html>
<head>
// include the css for the components and their assembly
</head>
<body>
// include user data form here
<some containers, images, and so on>
// show user list
// show privilege administration in this part
// and finally, the nice statistic graphs
// perhaps, we want to display some other components here in future
</body>
</html>
I have not found an answer on the net yet.
Most people come up with one big template which just implements all of the UI functionality, removing all modularity. Each component shall have its own template and view dealing only with that component developed by one person each, and they then shall be sticked together just like bricks.
I would highly appreciate any hints!
Inclusion tags are the way to do this. Each application defines tags which render their own template fragments, then the master template can assemble them into a single page.
I want to include things like twitter status, or delicious tags, in my django templates.
These things are dynamic, yet regular. How would this be done?
There are a number of ways to handle this, so you can choose a method that best matches your own personal style or requirements:
Template context variable: as answered by Alex you can put your content into a context variable that is included in the context of every template created by every view. Django even provides a mechanism for doing this automatically, called a context processor. Pros: very straightforward. Cons: won't dynamically refresh new content on client browsers.
AJAX dynamic loading: as mentioned by Alex and Dave you can dynamically load your content using AJAX methods. As an example using jQuery, you would put a placeholder in your template something like <div id="twitterfeed"></div> and then in a javascript block in your template put $("#twitterfeed").load("{% url twitterfeed %}"); where twitterfeed is a url so named in your urls.py. Pros: will dynamically update browsers. Cons: can be tricky if you don't know Javascript.
Inclusion tag: Django provides a type of template tag called an inclusion tag, which is basically a custom template tag that can render dynamic content. In a way it's similar to a context variable, except your code to generate the content will only be called when you use the custom template tag in your template instead of being called for every view. Another benefit is the content is generated from a template of its own. You could do this with a normal context variable of course, but it's not as clean (IMHO) as using an inclusion tag. Pros: very straightforward, clean. Cons: won't dynamically refresh new content on client browsers.
The simplest approach is to use {{ mycontent }} in your template (where you want the dynamically generated content to appear) and put the correspondence between mycontent and its value in the context you use to render the template -- i.e., the most fundamental part of django's templating.
If what you mean is that you want Ajax support whereby Javascript on the page continuously refreshes such content according to what the server wants it to be at any given time, I suggest looking into dojango, the Dojo/Django integration project -- it's not yet as fully mature as each of Dojo and Django are on their own (not version 0.4 yet), but it is already usable and useful.
A common technique is to leave a placeholder div in the generated content, then fill the div in on the client side via an AJAX call from Javascript that you include in the page.
That gives you the benefit of having a cacheable (fast loading) primary page, with separate dynamic bits. Depending on how live you want the dynamic bits, you can can even cache them for shorter durations.