The `.value` is a lie.🎂 (on viewof'ed inputs at least)

mootari · December 16, 2020, 1:31pm

Think of viewof as a macro that produces an additional Runtime Variable (internal represenation of a cell) for your viewof cell, so that you end up with two Variables:

viewof box, the cell that you originally defined,
box, which is a generator cell that listens to changes in viewof box via Generators.input and yields the new value.

Generators.input has some “magic” for inputs. Depending on the input type, it will:

listen to different events (e.g. “click” for checkboxes),
cast the value (e.g. via .valueAsNumber() for number and range inputs).

You can find the implementation details here:

github.com

observablehq/stdlib/blob/master/src/generators/input.js

import observe from "./observe.js";

export default function(input) {
  return observe(function(change) {
    var event = eventof(input), value = valueof(input);
    function inputted() { change(valueof(input)); }
    input.addEventListener(event, inputted);
    if (value !== undefined) change(value);
    return function() { input.removeEventListener(event, inputted); };
  });
}

function valueof(input) {
  switch (input.type) {
    case "range":
    case "number": return input.valueAsNumber;
    case "date": return input.valueAsDate;
    case "checkbox": return input.checked;
    case "file": return input.multiple ? input.files : input.files[0];
    case "select-multiple": return Array.from(input.selectedOptions, o => o.value);

This file has been truncated. show original

In general I find that looking at a notebook’s generated source can give some insight into the underlying logic, e.g.:
https://api.observablehq.com/@observablehq/introduction-to-views.js?v=3

Topic		Replies	Views
Click Handler for Circle/Nodes New To Observable	3	114	January 9, 2024
converting observable viewof operator to normal js Community Help	1	872	April 3, 2021
Unable to dispatch input event on non-Dom inputs Community Help	14	1531	July 4, 2021
Simple form causes infinite spinner? New To Observable	3	282	June 13, 2023
A viewof pedagogical notebook Show and Tell	12	1052	January 31, 2021

The `.value` is a lie.🎂 (on viewof'ed inputs at least)

Related topics