Polymer 1.0: dom-repeat tutorial part 2

cat-appender is the name of the element we are creating

Dom-repeat is one of the most useful helper elements in Polymer, in this post series we’ll go through a working example adding, removing and retrieving data, step by step explaining what is happening and linking to the appropriate documentation page for more in-depth details.

This post is part 2 of a 2-part series. Find part 1 here.

This post will discuss how to add, remove and retrieve elements.

Here's a demo of what the final result will look like.

Let users add their kitties

In your element's template (cat-appender.html in the demo), add this div right before the <ul>, a text input for the name and another one for the age, and a button to take these values and add it to the cat list.

<div>
  <input type="text" id="kittyName" placeholder="Name">
  <input type="text" id="kittyAge" placeholder="Age">
  <button on-click="_addKitty">Add</button>
</div>

Note the “on-click” annotation here, this is used by Polymer as a shortcut to assign an event listener to the element in the local dom rather than giving it an id and registering the event listener in the element prototype. Docs

Now, let’s define the “_addKitty” function.

In the element’s prototype definition inside your script, take a comma and add this, right after the properties object.

_addKitty: function() {
    var kittyName = this.$$('#kittyName').value;
    var kittyAge  = this.$$('#kittyAge').value;

    this.push("kitties", {name: kittyName, age: kittyAge});
}

• The first two lines get the values that are entered in the inputs, this is Polymer’s special syntax for the normal “querySelector” method. Here are all options for element selection.
• Last line is pushing an object into the kitties array, note the “this.push()” method, this is one of Polymer’s Array mutation methods, this syntax makes all listeners (observers, bound elements) to this array be notified with the change and they adapt to reflect it. If it was “this.kitties.push” the list won't update, unless you notify the listeners manually through notifySplices or notifyPath, but I haven’t really been in a situation that I had to use them.

Removing cats

We are still in the element's template (cat-appender.html in the demo).

Add a button right after the opening tag of the <li> inside the dom-repeat so it looks like this.

<li>
  <button on-click="_removeKitty">Remove</button>
  [[kitty.name]] : [[kitty.age]]
</li>

so every cat has its remove button to the left of it.

Now define the “_removeKitty” function.

Add a comma after the previous “_addKitty” function and define the new function like this.

_removeKitty: function(e) {
    var index = this.kitties.indexOf(e.model.kitty);
    this.splice('kitties', index, 1);
}

• Every item inside the dom-repeat carries a “model” object which it hands to its event handler (More details), this model carries the properties of its “row”, what concerns us here is the “item” itself.
• Note that the item is referenced with its alias (if any is defined), so refer to the item with model.item by default, and model.alias when you specify as=”alias” in your dom-repeat.
• Last line is again using an array mutation method to remove the item from the array.

Getting the element’s data from the outside world

Now we will define a function that users of this element will use to retrieve the inserted data.

In the element template, add this function to the prototype.

getData: function() {
    return this.kitties;
}

This function just returns the kitties (data) array to the caller.

In the demo page (index.html in the demo), add a div and a button that will print out the data inside the div when clicked.

<div>
  <button onclick="displayData()">Get data</button>
  <div id="dataDiv"></div>
</div>

And add the “displayData” function.

<script>
  var displayData = function() {
    var catAppender = document.querySelector("cat-appender");
    document.querySelector("#dataDiv").innerHTML = JSON.stringify(catAppender.getData());
  };
</script>

That’s it, now you have a repeating template which supports add, delete and retrieve operations on the data.