Is there a way I can dynamically bind a string and the text it outputs without using setInterval?

Question

Is there a way I can dynamically bind a string and the text it outputs without using setInterval? I want it to be similar to Angular and Vue though I want to do this with vanilla JS. I want to be able to open the console and change the value at any time and see the change output on my element. Thank you in advance!

score 1 · Answer 1 · answered Apr 06 '21 at 23:22

1

I think your only two options are:

A. Edit the element directly, e.g.

myPublicElemeVariable.innerText = 'Bla'

B. Use a setter (or Proxy):

obj = {
   get str() { return this.myStr; }
   set str(val) {
      elem.innerText = val;
      this.myStr = val;
   }
}

C. Just use a function/method!

answered Apr 06 '21 at 23:22

DemiPixel

1,768
11
19

What I mean, is that is there a way in Vanilla JavaScript and detect if a variable changes because if say app.message changes it changes the message in the element. Thank you! – JudahRR Apr 07 '21 at 15:21
https://stackoverflow.com/questions/11578377/detecting-change-in-a-javascript-object – DemiPixel Apr 07 '21 at 20:31

score 0 · Answer 2 · answered Apr 06 '21 at 23:58

0

If you mean you want change to be event-driven, there is already a very simple event framework in javascript - the EventTarget class as demonstrated by this Code Sandbox

//define a watchable thing

class ValueTarget extends EventTarget {
  constructor(value = "") {
    super();
    this.setValue(value);
  }
  getValue() {
    return this._value;
  }
  setValue(value) {
    this._value = value;
    this.dispatchEvent(new CustomEvent("change", { detail: { value } }));
  }
}

//get the page elements
const inputElement = document.querySelector("input");
const outputElement = document.querySelector("h1");

//create a watchable thing
const fieldTarget = new ValueTarget("");

//wire events that will change the watchable
inputElement.addEventListener("input", function (e) {
  fieldTarget.setValue(e.target.value);
});

//receive notifications from the watchable
fieldTarget.addEventListener("change", (e) => {
  outputElement.textContent = e.detail.value;
});

You may be as well to build your own given how simple it is - maintains a list of listeners and calls them when notified. My work recently needed such a thing which I knocked up in Typescript at https://github.com/cefn/lauf/blob/main/modules/lauf-store/src/core/watchable.ts#L3-L21 and would therefore be very easy to redo in javascript.

answered Apr 06 '21 at 23:58

cefn

2,895
19
28

So, would that work if I went into the console and changed the value it would change the text in the input. Furthermore, could you show me how I would initialize that. – JudahRR Apr 07 '21 at 00:33
If you want to change a value using normal javascript syntax like 'myObj.myValue=20' you need to use something like mobx. See the line 'makeAutoObservable(this)' in the example at https://mobx.js.org/README.html . However, if you're willing to manage creating a new ValueTarget('myvalue'), setting it using valueTarget.setValue('newval') and monitor it using addEventListener('value', myListener) then the above would work. What I shared is more of a proof of concept. There are good reasons that people use React useState, useReducer, useContext, Redux, Mobx, RxJs. – cefn Apr 07 '21 at 06:59
What I mean, is that is there a way in Vanilla JavaScript and detect if a variable changes because if say app.message changes it changes the message in the element. Thank you! – JudahRR Apr 07 '21 at 15:21
If app.message changes how? I described several ways. If you want to 'patch' javascript so that changes made using normal javascript can be detected then MobX is a mainstream way to do that. – cefn Apr 07 '21 at 15:26
Changes value, and I said that I want to do this with vanilla JavaScript. – JudahRR Apr 07 '21 at 18:59
So unless you are running as a debugger (and basically are god that sees everything) the only way you can detect if something has changed in javascript is A) check it once in a while (what you don't want to do) B) change the item from a normal javascript object in the first place so that your code can intercept and run when a change is made to it. Normal javascript objects can't do this, hence either you have to do something weird that's unlike normal variable setting (like I showed - make a special setValue operation) or rely on a library that tries to do this behind the scenes (like mobX). – cefn Apr 07 '21 at 19:20
So for example you can't ever detect the assignment of a variable declared with let (unless you are a debugger). However, if you change the assignment of a named property on an OBJECT, then that object can be specially modified in advance to intercept anything that's done to its properties. That's what MobX does. By contrast Redux has a trick which is to monitor every OPERATION you do and see if a central object is a different object before and after. It takes discipline to make sure you always replace the object if it's changed, which is maybe a bit harder than MobX. – cefn Apr 07 '21 at 19:23

Is there a way I can dynamically bind a string and the text it outputs without using setInterval?

2 Answers2