can/demos/forms/advanced-sticky-resolve.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<sticky-odd-number></sticky-odd-number>

<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { StacheElement } from "can";

class StickyOddNumber extends StacheElement {
    static view = `
        <label>
            Odd numbers only:
            <input type="number" value:bind="this.oddNumber">
        </label>

        <p>selected number: {{ this.oddNumber }}</p>
    `;

    static props = {
        oddNumber: {
            value({ listenTo, lastSet, resolve }) {
                listenTo(lastSet, (newVal) => {
                    if (newVal % 2) {
                        resolve(newVal);
                    }
                });
            }
        }
    };
};
customElements.define("sticky-odd-number", StickyOddNumber);
</script>