Attach Data to Elements

An app in a single file

The entire app we're building in this tutorial fits inside of one file, app/pages/app-index.hbs and is only 73 lines of HTML!

A quick note on saving

If you're following along with the video and you want your data to auto-save whenever the page loads (not a great idea in production, but fine in development), then add this to the end of your app/assets/js/remake-init.js file:

Remake.callSaveFunction(document.body)

Remake's Custom Attributes

All of the functionality that Remake allows us to build so quickly — creating a complete Kanban app from scratch in record time — is done by only 9 custom attributes (used a total of 22 times).

If you learn only the following 9 custom attributes, you'll be able to build some pretty powerful apps with Remake!

  • object
    • This marks an element as a JSON object
    • Elements nested inside this element will be nested inside the object
      • For example, if you add an array element with a key inside this element, then Remake will see the data like this: {keyName: []}
  • array
    • This marks an element as a JSON array
    • Elements nested inside this element will be nested inside the array
      • For example, if you add a series of three elements inside this element that all have the object attribute, then Remake will see the data like this: [{}, {}, {}]
  • key:
    • Only elements with the object attribute can have this attribute
    • This attribute lets you name a piece of data and tell Remake where it's located
      • For example, this HTML: <div object key:name="@innerText">David</div> produces this data: {name:"David"}
  • key
    • If you want to nest the data of one element inside another one, use this attribute
    • Whatever value you give to key will be the label that the nested has inside the parent element
      • For example, this HTML: <div object><div array key="myArray"></div></div> produces this data: {myArray:[]}
  • edit:
    • The easiest way to make a key: editable
    • Just pass in a key name and put this on the same element as the key (or inside it) and Remake will automatically make it editable!
      • For example, the data in this element will be editable: <div object key:name="@innerText" edit:name>David</div>
  • default:
    • If a user edits a piece of data and sets it to nothing, that key: will be set to this matching default: value instead
  • new:
    • Adds a new item to the page.
      • The item's name must match a partial template's name or an item from a {{#for}} loop
      • The item is rendered automatically by Remake and added to the nearest array element
      • For example, if you have a for loop like {{#for item in items}}... then you can use <button new:item>Create new item!</button> to render a new item and add it to the list!
  • sortable
    • All elements directly inside this element can be dragged and reordered
      • For example: <div array sortable><!--Elements here can be sorted--></div>.
  • target:
    • This is a special, but important attribute. It lets you attach a key: on higher-level element, but reference a value on a lower-level element.
    • If you pass the @search command into a key: attribute, then that key will look for its value inside its element until it finds a matching target: element
      • For example, with: <div object key:name="@search"><span target:name="@innerText">Sam</span></div>, the value of the key "name" is "Sam".

To learn more, check out An Overview of Remake's Attributes

→ Next: Rendering Data

View on GitHub
☰ Menu