I can't seem to get this code to work properly.
<template repeat="{{item in list}}"> </template>
Although, I have also attempted the following method which resulted in errors:
<template is="dom-repeat" id="example" items="{{list}}"></template>
The errors related to is="dom-repeat" are as follows:
Uncaught TypeError: Polymer.dom.addDebouncer is not a function
Uncaught TypeError: Polymer.dom is not a function
What could be causing this issue?
Below is my code snippet:
<link rel="import" href="../lib/iron-ajax/iron-ajax.html">
<link rel="import" href="../lib/polymer/polymer.html">
<link rel="import" href="welcome-title.html">
<dom-module id="remove-user">
<template>
<iron-ajax id="getAll" url="http://localhost:3002/secure/api/all" method="GET" handle-as="json" on-response="getAllCB" with-credentials='true'></iron-ajax>
<div class="ui relaxed stackable grid centered" id="admin-container">
<welcome-title class="ui center aligned row grid"></welcome-title>
<form class="ui grid remove-user hide twelve wide column" method='post' action="/secure/add-user">
<h3>Remove User</h3>
<table class="ui unstackable celled table ">
<thead>
<tr><th class="nine wide">Username</th>
<th class="three wide">Permission</th>
<th class="one wide"></th>
</tr>
</thead>
<tbody> ...
Here's where I'm stuck. The content inside the repeat doesn't display on the page even though everything else outside of it does. There are no console errors present.
<template repeat="{{user in users}}">
<span>{{user}}</span>
</template>
Why is the content within the repeat not being rendered on the page?
... <tr>
<td><span></span></td>
<td></td>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr><th colspan="3">
<button class="right floated negative ui button"><i class="remove user icon"></i>Remove User(s)</button>
</th>
</tr></tfoot>
</table>
</form>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "remove-user",
ready: function(){
this.$.getAll.generateRequest();
},
getAllCB: function(data){
this.users = data.detail.response;
}
});
</script>
When viewing the users JSON object through the browser console using JSON.stringify(), here is what it looks like:
[{"username":"admin","permission":"admin"},
{"username":"admin","permission":"application1"},
{"username":"user","permission":"application1"},
{"username":"test","permission":"application1"}]
To access the entire project: The specific file mentioned can be found at
authentication/public/elements/remove-user.htmlauthentication/secure.html
For more information, visit https://github.com/CoultonF/Web-Development-3-Node.JS