...be fetched from the database/your record. This results in the following compiler (when using Unpoly): import StreetMap from 'street_map' up.compiler('.map', function(map) { let targetLocation = map.getAttr('target') let streetMap...
...the calendar box and make it unusable: If you are using a tool like Unpoly you might want to set autocomplete="off" in the JavaScript that also initializes your date...
...frameworks comes with mechanisms to activate JavaScript behavior on certain DOM elements. E.g. in Unpoly uses compilers for that purpose. Instead of using a framework mechanism you may use customElements.define...
...this is easily doable by using the asynchronous import function. Say we have an unpoly compiler that sets up TinyMCE like this (code is somewhat simplified): // TinyMCE as part of...
...decide if any of it needs an update. Your main components (e.g. Ruby, Rails, Unpoly) should always be reasonably up to date. Keeping your dependencies up-to-date is like...
Accept story Reject story Support This [formaction] attribute is supported in all browsers. Unpoly's form submission supports it since version 2.0. Pitfalls If you press enter on a...
...like and using JavaScript to disable all controls inside it. This works nicely with Unpoly compilers or Angular directives. See jsbin for an example...
...different rules for equality. Your project will often use a library like Lodash or Unpoly's up.util that will hide this inconsistency behind functions like _.isBoolean(x) or _.isObject(x...
...Chrome DevTools network panel) to feel how your app behaves. If you're using Unpoly, show a loading state while requests are loading. If you cannot implement this for every...
...browser, it will follow a redirect with GET as expected. This is also what Unpoly or the Rails unobtrusive Javascript adapter does when you annotate a link with data-method...
Our applications not only need to be functional, they need to be fast. But, to quote Donald Knuth, premature optimization...
_.isEqual([1, 2], [1, 2]) // => true If your project already uses Unpoly you may also use up.util.isEqual() in the same way: up.util.isEqual([1, 2], [2, 3]) // => false up.util.isEqual...
...are several ways to deal with this: Consider disabling the button when clicked. With Unpoly, this is a single attribute. Consider embedding a hidden token into your forms so you...
Native JavaScript document.addEventListener('click', function(event) { if (event.target.closest('.dialog-link')) { // Open dialog } }); Unpoly up.on('click', '.dialog-link', function(event, link) { // Open dialog }); jQuery $(document).on('click', '.dialog-link...
...slightly different as the official docs for Rails) might look like in Rails + webpack + Unpoly. Also see the HN discussion for pro and cons...
...local file system? Usage of frontend libraries How can you include a library like Unpoly or Tom Select to your code base? Can we install arbitrary packages from npm? Postprocessing...
...is also the shortcut element.click(). Loading elements after a delay Use custom elements or Unpoly compilers to build a element. It should afford an API like this: This will load...
...fn // => "function" typeof obj // => "object" Due to practical considerations, utility libraries like Lodash or Unpoly's up.util module consider functions to be objects: up.util.isFunction(fn) // => true up.util.isObject(fn) // => true up.util.isFunction...
...browser. These typically provide functionality like: General support libraries like Lodash Frontend Frameworks like Unpoly Wysiwyg (What You See Is What You Get) HTML editors Datepickers Sliders Tooltips Dialogs ...
...when using nested forms When aggregating nested children, always exclude children marked for destruction Unpoly + Nested attributes in Rails: A short overview of different approaches Exercises Showtimes for MovieDB
There is no single place to look up documentation for our stack. This card includes some hints where you can...
...the right HTML elements. Some common ways to do this are: Our compiler() helper Unpoly compilers Custom Elements MutationObserver AngularJS directives React components We recommend using the compiler() helper for...
...all ETags after a new Capistrano release. etag { up.target } # Add this when you use Unpoly < 3 and optimize responses for render targets private # Builds an ETag input from the given...
...you don't send multiple requests at the same time. If you're using Unpoly, the [up-watch] or [up-autosubmit] attributes will do this for you.