Assign result dataset to UI

Code

<script type="text/template" id="resultTpl">
  <ul>
  <% if (result && result.length > 0) { %>
    <% _.each(result, function(data) { %>
      <li id="<%= data._id %>" style="color:<%= data.color %>;">
        <p>
        <span>| Name: <%= data.name %></span>, <span>Value: <%= data.value %></span>
        </p>
      </li>
    <% }); %>
  <% } %>
  </ul>
</script>

<script type="text/javascript">
var db = Longo.use("example");
var tpl = _.template($("#resultTpl").html());
db.collection("output").find({}).sort({"value":-1}).assign($("#out"), tpl);
</script>

Result

Run Query

$("#eval0").on("click", function(e){
  db.collection("output").save([
    {"name":"Apple","value":3,"color":"red"},
    {"name":"Grape","value":5,"color":"purple"},
    {"name":"Orange","value":1,"color":"orange"}
  ]).done();
})

$("#eval1").on("click", function(e){
  db.collection("output").update({"name":"Apple"},{"name":"Apple","value":3,"color":"green"}).done();
})

$("#eval2").on("click", function(e){
  db.collection("output").update({"name":"Orange"},{"$inc":{"value":5}}).done();
})

$("#eval3").on("click", function(e){
  db.collection("output").remove({"name":"Grape"}).done();
})

$("#eval4").on("click", function(e){
  db.collection("output").insert({"name":"Banana","value":20,"color":"yellow"}).done();
})