Question

I have a template:

<script type="text/template" id="action-template-item">
    <span data-layer="<%= target%>" data-uuid="<%= uuid%>">delete</span>
</script>

I render the template in a view

    window.ActionView = Backbone.View.extend({
          template: $("#action-template-item").html(),
          initialize: function () {
                this.render();
          },
          render: function () {
              var tmpl = _.template(this.template);
              console.log(this.model);//model have "target"
              this.$el.html(tmpl(this.model));
              return this;
          }

    });

the template have only two property from model data,

before it render, I use console to check if the model have target value, the answer is positive,just like the comment above,

my model data is just like:

{
   target: "xxx-xxx-xxx",
   uuid: "xxx-xxx-xx"
}

but the firebug tell me "target is not defined"

What happened?What’s wrong with my code ?

Answer 1

Your models probably look something like this:

var M = Backbone.Model.extend({});
var m = new M({
   target: "xxx-xxx-xxx",
   uuid: "xxx-xxx-xx"
});

Demo (open the console and you’ll see your error): http://jsfiddle.net/ambiguous/Rnd6k/

So when you say

//model have "target"

you probably mean that this.model.attributes.target exists. Backbone model attributes and JavaScript object properties are not the same thing, the Underscore templates will be looking for object properties, they don’t know anything about Backbone model attributes.

The usual approach is to serialize your model using toJSON when you want to render a view:

render: function () {
    var tmpl = _.template(this.template);
    this.$el.html(tmpl(this.model.toJSON()));
    return this;
}

Demo: http://jsfiddle.net/ambiguous/Rnd6k/