Directory

if-diff - Vaadin Add-on Directory

Alternative to Polymer's dom-if that progressively compares two properties rather than just binding to a single boolean property if-diff - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/if-diff) # \ \ is an alternative to Polymer's [dom-if](https://polymer-library.polymer-project.org/3.0/docs/devguide/templates#dom-if) element that allows comparison between two operands, as well as progressive enhancement. See [if-else](https://github.com/matthewp/if-else) for another data-centric alternative. if-diff allows the server to display content that should be initially displayed, then adjusts what is displayed as conditions in the browser change. For example, suppose today is Monday. The server could generate the syntax below: ```html ... ...
I wish it was Sunday
... ``` Generally, as will see, a data-* value of "1" should be interpreted as "matches", so assuming your css is consistent with that interpretation, the user will immediately see the desired text "I wish it was Sunday" before a single byte of JS is downloaded. Since the text for Tuesday is not yet applicable, embedding the content inside a template tag will allow the browser to ignore whatever is inside until needed. Only if the day changes would we need to display Tuesday. At that point, the template needs to be cloned (and discarded). So to fill in the details: Rules: 1. The "tag" attribute refers to a data-* attribute / dataset.* property. The case is based on the property name. 2. Only downstream sibling elements are checked for the data-* attribute. This is to encourage unidirectional data flow, and keeping related things physically close. 3. Speaking of which, the optional m attribute indicates the maximum number of elements that are getting affected by the *if-diff* tag. Placing the *if-diff* element right above the elements it affects, and specifying "m" accurately, will improve performance and help reduce greenhouse emissions. 4. *if-diff* sets the data-* attribute to "1" when the condition is true, "-1" if not. It is up to the application's css styling to interpret how this should display. 5. If *if-diff* encounters a data-* value of "0", this signifies there's exactly one template inside the DOM element, which needs cloning before changing to "1". It will leave the template untouched if the condition is not satisfied. 6. The "if" attribute / property is actually an active participant in the logical evaluation. If that attribute / property is false, then the evaluation will be false no matter what. And as the demo below indicates, not_equals is also supported.
``` --> ## Syntax ## Commonality with p-d.p-u (a kind of dom-bind alternative) Not only does if-diff share the same fetish for unidirectional data flow as [p-d.p-u](https://www.webcomponents.org/element/p-d.p-u), they share a number of common modules. As a result, while if-diff weighs around 1.6kb and p-d weighs around 1.9kb, combine them together, and due to the magic of code reuse, the combined size is ~2.5kb minified and gzipped. ## Go to sleep mode It is quite common to have a user interface with multiple tabs, each tab depending on some common filters / inputs. if-diff can be used in this scenario, and to help improve performance, it can toggle the disabled attribute on the target elements. If the elements themselves know how to "go to sleep" when disabled, and then sync up with the new filters / inputs when disabled is removed, that could provide the most optimal performance. ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally. ## Installation ```sh $ npm install if-diff ``` ## Viewing Your Element ``` $ polymer serve Open http://127.0.0.1:8081/ ``` ## Running Tests ``` npm test ```