innerHTML 'each function' vs js file 'each function' when using underscore.js

Question

I want to get array using underscore.js.

Here is my case.

view.js

views.list = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template({result : this.collection.models}));
        _.each(this.collection.models, function(model){
          console.log(model.get("id"));
        });
        return this;
      }
    });

Run result _.each(this.collection.models, function(model){console.log(model.get("id"));});

list.html

<div id="columns">
      <% _.each(result, function(model){ %>
        <div id="<% model.get("id") %>" class="content">
          <a href="<% model.get("url") %>">
            <figure>
              <img src="<% model.get("imgSrc") %>">
              <figcaption><% model.get("title") %></figcaption>
            </figure>
        </div>
      <% }); %>
      </div>

I sent an argument to this.collection.model as result parameter, so I think the above executable code and the executable code I wrote in html are the same, but the running result is not the same.

What's the difference?

Answer 1

You need to use expressions in the template which output a value. Instead of

<div id="<% model.get("id") %>" class="content">

You need:

<div id="<%- model.get("id") %>" class="content">

See the docs