# Templates Templates are just normal Django HTML templates, so anything you could normally do in a Django template will still work, including template tags, filters, loops, if statements, etc. ```{warning} `Unicorn` requires there to be one root element surrounding the component template. ``` ## Model modifiers ### Lazy To prevent updates from happening on _every_ input, you can append a `lazy` modifier to the end of `unicorn:model`. That will only update the component when a `blur` event happens. :::{code} html :force: true
Hello {{ name|title }}
::: ### Debounce The `debounce` modifier configures how long to wait to fire an event. The time is always specified in milliseconds, for example: `unicorn:model.debounce-1000` would wait for 1000 milliseconds (1 second) before firing the message. :::{code} html :force: true
Hello {{ name|title }}
::: ### Defer The `defer` modifier will store and save model changes until the next action gets triggered. This is useful to prevent additional network requests until an action is triggered. :::{code} html :force: true
::: ### Chaining modifiers `Lazy` and `debounce` modifiers can even be chained together. :::{code} html :force: true
Hello {{ name|title }}
::: ## Key ### Smooth updates Setting a unique `id` on elements with `unicorn:model` will prevent changes to an input from being choppy when there are lots of updates in quick succession. ```html ``` ```html !-- smooth-updates.html --> ``` However, setting the same `id` on two elements with the same `unicorn:model` won't work. The `unicorn:key` attribute can be used to make sure that the elements can be synced as expected. ```html ``` ```html ``` ### DOM merging The JavaScript library used to merge changes in the DOM, `morphdom`, uses an element's `id` to intelligently update DOM elements. If it isn't possible to have an `id` attribute on the element, `unicorn:key` will be used if it is available.