Hyperhtml: A way to achieve something like yo-yo's yo.update()?

[davidmerrique]

Is there a way I can update an element already in the DOM created with hyperHTML.wire()?

Similar to yo.update(el, newEl) https://github.com/maxogden/yo-yo#dynamic-updates

Thank you for this!

[WebReflection]

This would do:

var hyperHTML = require('hyperhtml');

var numbers = [];
var el = list(numbers, update);

function list(items, onclick) {
  return hyperHTML.wire(items)`<div>
    Random Numbers
    <ul>${items.map(item => `<li>${item}</li>`)}</ul>
    <button onclick="${onclick}">
      Add Random Number
    </button>
  </div>`;
}

function update () {
  // add a new random number to our list
  numbers.push(Math.random());

  // just update
  list(numbers, update);
}

document.body.appendChild(el);

[WebReflection]

P.S. if you have complex objects instead of just random numbers

return hyperHTML.wire(item)`<li>${item.name} ${item.age}</li>`;

😉

[WebReflection]

For reference sake, if you map an array of strings, instead of nodes, innerHTML is the cheapest, fastest, easiest way to go.

If you need differential updates, you need to use .wire(reference) which shouldn't be a primitive 'cause if you need a primitive only you're better off with basic node.append(primitive) or node.appendChild(document.createElement('li')).textContent = primitive;

The purpose of this library is not to replace basic DOM operations but to simplify them 😉

[jfrazzano]

I have been using a remove followed by a parent.insertAdjacentHTML(“after begin”, mydomstring )….. In the dynamic text columns demo I sent you, the one with bound line numbers for quotes in related questions; I used insertInnerHtml… but I had to wrap the columns a bunch of times to keep stuff stable….
For instance, now i have a widget set for dashboard, if I just inner html one widget over another in a holder… I get a lump of text… Happened both using first release hyper and in native.

more recently had widgets in resizable containers blew content away… Lump of text or weird render

From what I have read on domstrings, I am pulling an abrupt, during render….

Which is my fault. I often throw a processing reduce in the actual execution. The function call to insertAdjacentHTML, doesn’t mind another function as argument.

The overloaded equals or a plus equals operators are less forgiving.

On Mar 20, 2017, at 5:20 PM, Andrea Giammarchi [e-mail] wrote:

For reference sake, if you map an array of strings, instead of nodes, innerHTML is the cheapest, fastest, easiest way to go.

If you need differential updates, you need to use .wire(reference) which shouldn't be a primitive 'cause if you need a primitive only you're better off with basic node.append(primitive) or node.appendChild(document.createElement('li')).textContent = primitive;

The purpose of this library is not to replace basic DOM operations but to simplify them 😉

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/WebReflection/hyperHTML/issues/21#issuecomment-287901867, or mute the thread https://github.com/notifications/unsubscribe-auth/AHxnvpzBgi548ymfTYvAww-cUfcovRPuks5rnu26gaJpZM4MjAdK.

[WebReflection]

there is no innerHTML used in hyperHTML, neither insertAdjacentHTML.

However, if you need to do that stuff and it works for your use case, go for it.

[davidmerrique]

@WebReflection Amazing, thank you!

[jfrazzano]

Sorry if I implied hyper used the insert or equals. I have a larger implimentation that uses partial attribute binds and builds elements in a reduce so I was trying a "mash up" of hyper to accord for the attribute usage and my own parsing.

I am starting a refactor to try and directly incorporate you're wire approach at a core level.

I will share when and if it's relevant.

Sorry again for implying your system used the rougher grade less efficient methods