blikblum/tinybind

Full object obseve in watches

Closed this issue · 4 comments

bart112233 commented

In example below changing any property of observed object ("cfg") does not initiate update computed value. Is any way to observe on all object properties? May be some like this:
<button rv-on-click="savecfg" rv-enabled="cfgchanged | watch cfg.* cfg_old">Save</button>

example:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Test web page</title>
</head>

<body>
  <section id="config">
    <p> <button rv-on-click="savecfg" rv-enabled="cfgchanged | watch cfg cfg_old">Save</button></p>
    <p>IP: <input rv-value="cfg.net.ipv4" type="text" class="ip_address"></p>
    <p>Mask: <input rv-value="cfg.net.net_mask" type="text" class="ip_address"></p>
  </section>

  <script type='text/javascript' src='libs/tinybind.min.js'></script>

  <script type="text/javascript">

    var cfg_model = {
      cfg: {
        net: {
          ipv4: '192.168.1.200',
          net_mask: '255.255.255.0',
          gw: '192.168.1.1',
          dns1: '8.8.8.8',
          dns2: '8.8.4.4',
          dhcpusage: false
        }
      },
      cfg_old: '',
      cfgchanged() {
        return cfg_model.cfg_old != JSON.stringify(cfg_model.cfg);
      },
      savecfg() {
        cfg_model.cfg_old = JSON.stringify(cfg_model.cfg);
      }
    }
    cfg_model.savecfg(); //init
    tinybind.bind(document.getElementById("config"), cfg_model);

  </script>
</body>

</html>
blikblum commented

Currently there no way. Needs to update the reactivity system to use Proxy

bmbanker commented

I've been doing a little research on proxy objects and it looks like it would require a significant change to how tinybind would be used. You'd need to return a proxy upon binding so that the user could make changes to that instead of the original object...

Are there plans to switch to a Proxy implementation in the near future?

blikblum commented

Are there plans to switch to a Proxy implementation in the near future?

No.

In fact i believe, tinybind as a modernized, cleaned up rivets is done.

The problem is we reached the limits of the approach (a reactivity system using customized attributes). To overcome this problem would basically the need to recreate something like Vue

  • 👍1
karneaud commented

Would be interested in a more optimized performance. I'm not going to rule it out but perhaps as a plugin some how? TinyBind should remain light weight as possible for small projects though.