Path: csiph.com!3.eu.feeder.erje.net!feeder.erje.net!news.mb-net.net!open-news-network.org!.POSTED.96.235.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Painted into a corner
Date: Wed, 09 Dec 2020 17:09:02 +0100
Organization: PointedEars Software (PES)
Lines: 74
Message-ID: <2178622.ElGaqSPkdT@PointedEars.de>
References: <CrOdnaj9_ITsBFDCnZ2dnUU7-VfNnZ2d@westnet.com.au> <11650524.O9o76ZdvQC@PointedEars.de> <5415173.DvuYhMxLoT@PointedEars.de> <5663081.lOV4Wx5bFT@PointedEars.de> <XKqdnfj-ouveS1PCnZ2dnUU7-U_NnZ2d@westnet.com.au>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
Injection-Info: gwaiyur.mb-net.net; posting-host="96.235.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch:178.197.235.96"; logging-data="20784"; mail-complaints-to="abuse@open-news-network.org"
User-Agent: KNode/4.14.10
Cancel-Lock: sha1:bVMn0hE+afuZCFKLExnQf4QFQv4=
X-User-ID: U2FsdGVkX1+mOWflt1ZGFyJO08+rFM1Y8JubFgiKSPVDxMwVAzrvWw==
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
Xref: csiph.com comp.lang.javascript:39260

Andrew Poulos wrote:

> Rather than making multiple copies of the same "Image" component I was
> thinking to just use one and set/reset it when the user adds another
> image.
> 
> But currently all the UI components are "within" a single form so if
> the user adds an "Image" there's no way it's values can be separated
> from any other "Image's" values.

Why not?  AISB, form controls with the same name are automatically indexed 
in the DOM.  Suppose your “Image” component looks like this:

  <form id="f-images">
    <div class="c-image">
      <input type="number" name="imgWidth" value="0">
      <input type="checkbox" name="imgGrayscaleCbx" checked>
      <input type="range" name="imgGrayscaleRange" value="0" disabled>
    </div>

Then if you have another component

    <div class="c-image">
      <input type="number" name="imgWidth" value="42">
      <input type="checkbox" name="imgGrayscaleCbx">
      <input type="range" name="imgGrayscaleRange" value="1" disabled>
    </div>
  </form>

then the controls of the first component can be referred to by

  form.elements['imgWidth'][0]
  form.elements['imgGrayscaleCbx'][0]
  form.elements['imgGrayscaleRange'][0]

and the controls of the second component by

  form.elements['imgWidth'][1]
  form.elements['imgGrayscaleCbx'][1]
  form.elements['imgGrayscaleRange'][1]

whereas previously

  let form = document.forms['f-images'];

    [Historically one would have used names like “imgWidth[]” to indicate
     the NodeList; IIRC, it still makes a difference in PHP.]

It does not matter if the second component was already there (in the markup) 
or if the user performed an action so that it was inserted into the document 
tree.  And as the NodeList is live, it does not matter if the user deletes 
the first component.  So you can iterate over one of those NodeLists, e.g. 
form.elements['imgWidth'], to access (and serialize) the corresponding 
controls.
 
> Should I just clone the "Image" so that form elements exist for every
> "Image"? (Though for 10 Images that means 1,000+ inputs added to the
> HTML.)

If this is not supposed to work without scripting anyway, and requires no 
user interaction then you should store the data in an array right away, and 
forget about form serialization.

Otherwise it is a good idea to add a new instance of the component.  If you 
do that by cloning markup, then you should clone properly initialized 
template markup and not the markup of another instance of the component.

If none of this makes sense to you, then you have to elaborate on your
use-case.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.