How to use models in Unicorn.


This screencast is going to be about models. These are not Django database models (we'll get to those later), but if you have ever used Vue or Livewire, the model attribute in your HTML will probably look familiar.

A model refers to a field on a component. So, count here refers to the compnent field here. Models have a two-way binding between the HTML and the component class.

Let's add some more models to see how it all works.

So, let's update this HTML. So, now we have a select form field, a text input, a number input, and some Django template code. Let's update our component to include creature and name.

Ok. Let's refresh our component; we can see our new fields. Let's choose "Unicorn", let's name it "Filbert" because why not, and if we increase the count, we can see that our template now renders out "1 unicorn named Filbert" and if we increase the count again, this conditional gets rendered out.

We can see that every time an input changes there is a new AJAX call. Let me open this [developer toolbar] up real quick. On the request, there is an action and some book-keeping that Unicorn uses to keep things in sync. And then on the response there is some data that comes back, there is the HTML that gets merged into our current index page.

Listening to every input change is great for simple use-cases, but it might be too chatty or slow in some instances. Unicorn has a few modifiers that can be used to change how models interact with the backend.

The first modifier is to change how long to debounce the input. By default, Unicorn waits for 250ms before sending the input over the wire. However, we can change that with this modifier.

This will change the time that Unicorn waits to send an input to 1 second. Let's try that out. Let's try "Bigfoot". Let's use "Albert". I'll clear [these XHR network calls]. We can tell that it took a little bit longer. Let's change it to 5 just to make sure that I'm not lying to you. 😉 Alright, that looks like it is working as expected.

Another modifier that Unicorn has is to use "lazy" on the mode. This will basically only fire the event when the input goes on blur instead of on change. Let's call it "Albert" again and this time we can increase the count over and over again and no AJAX calls happen, but once we clicked outside of it, it will send an AJAX call. Let's try that again; nothing happens. Let's click outside and there goes the event.

They can even be chained together, so if you wanted to have something wait for on blur and then also wait for 3 seconds than you can do something like that. And let's test that out. Let's say "Dragon", let's say "Tommy", and 3. I'm going to click out and we'll wait for 3 seconds and then it'll get updated. Perfect.

The last modifier is "defer" and to demonstrate that I'll give you a sneak peak into "actions" as well. Alright, so I'm going to get rid of this "lazy" and "debounce" and I'm going to say "defer" and I'm going to put a button down here at the bottom with a click action of "save" and I'm going to add a method that is just going to print out something. Let's refresh our component. "Yeti", his name was "Albert", we can increase the count over and over again, we can click outside and nothing happens. I can clear [these network XHR calls]. You can see nothing is going until I hit [the] "save" [button]. And then we look at this [XHR network calls], we can see that there are 2 actions that get sent over the wire. 1 is to set the count, and 1 is to set the method.