Merge Signals If Missing#

Demo#

Explanation#

<div
  id="demo"
  data-signals="{id: 1234}"
  data-on-load="sse('/examples/signals_ifmissing/updates')"
>
  <div>
    Should always be 1234:
    <span data-text="id.value">should be replaced</span>
  </div>
</div>

The data-signals attribute is used to set the initial state of the signals. You can check your browser’s Network Devtools to see the updates endpoint alternates between sending fragments and direct signal merges like the following:

...

event: datastar-merge-signals
data: onlyIfMissing true
data: signals {id:73}

event: datastar-merge-fragments
data: mergeMode upsertAttributes
data: fragments <div id="demo" data-signals__ifmissing="{id:74}"></div>

event: datastar-merge-signals
data: onlyIfMissing true
data: signals {id:75}

event: datastar-merge-fragments
data: mergeMode upsertAttributes
data: fragments <div id="demo" data-signals__ifmissing="{id:76}"></div>

event: datastar-merge-signals
data: onlyIfMissing true
data: signals {id:77}

...

Since the signals is already set, the data-signals__ifmissing attribute will not overwrite the existing value in either case.