Use

{{domData(key)}} lets you associate the current context with the element so the context can later be retrieved by can-dom-data.

Let’s look at a simple example:

import Component from "can-component";
import domData from "can-dom-data";

Component.extend({
  tag: "todo-list",
  view: `
    <ul>
      {{#each(todos)}}
        <li {{domData("todo")}}>
          {{title}}
        </li>
      {{/each}}
    </ul>
  `,
  events: {
    "li click": function(element) {
      const todo = domData.get(element, "todo");
      // Do something with todo
    }
  }
});

Note: this contrived example is just to demonstrate the {{domData}} helper; if you need to create a click handler, you should write <li on:click="handler(this)"> and add a handler() method to your view-model.

Pass a specific value

By passing a second argument to {{domData(key, value)}}, you can associate a specific value with the element so the value can later be retrieved by can-dom-data.

Here’s another example:

import Component from "can-component";
import domData from "can-dom-data";

Component.extend({
  tag: "todo-list",
  view: `
    <ul>
      {{#each(todos)}}
        <li {{domData("todos", ../todos)}}>
          {{title}}
        </li>
      {{/each}}
    </ul>
  `,
  events: {
    "li click": function(element) {
      const todos = domData.get(element, "todos");
      // Now you have access to the entire todos list
    }
  }
});