how to append a div directly into en element in BackboneJs

Question

Here is the problem I met,

  <div class="step slide" data-x="1500" data-y="15" data-z="0" data-rotate-x="10" data-rotate-y="1000" data-rotate-z="500" data-scale="6">
      start to build your own presentati
  </div>
</div><div>

  <div class="step slide" data-x="1500" data-y="15" data-z="0" data-rotate-x="10" data-rotate-y="1000" data-rotate-z="500" data-scale="6">
      start with
  </div>
</div>

this is generated by backboneview

 var IuntiView = AV.View.extend({

    //... is a list tag.


    // Cache the template function for a single item.
    template: _.template($('#iunit-template').html()),

    // The DOM events specific to an item.
    events: {

        // ,
        // "blur .edit": "close"
    },

    // The TodoView listens for changes to its model, re-rendering. Since there's
    // a one-to-one correspondence between a Todo and a TodoView in this
    // app, we set a direct reference on the model for convenience.
    initialize: function() {
        _.bindAll(this, 'render', 'close', 'remove');
        this.model.bind('change', this.render);
        this.model.bind('destroy', this.remove);
    },

    // Re-render the contents of the todo item.
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
         console.log(this.template(this.model.toJSON()) );
        return this;
    },

    // Close the `"editing"` mode, saving changes to the todo.
    close: function() {
        this.model.save({
              content: this.input.val(),
              step:$("input[name='step']").val(),
              dataX:$("input[name='dataX']").val(),
              dataY:$("input[name='dataY']").val(),
              dataZ:$("input[name='dataZ']").val(),
              dataRotateX:$("input[name='dataRotateX']").val(),
              dataRotateY:$("input[name='dataRotateY']").val(),
              dataRotateZ:$("input[name='dataRotateZ']").val(),
              dataScale:$("input[name='dataScale']").val()
        });

    }

});

At first there was a tagName="div" here. I removed that and I noticed that it donesn't matter no matter how I change.

I just want code like this

  <div class="step slide" data-x="1500" data-y="15" data-z="0" data-rotate-x="10" data-rotate-y="1000" data-rotate-z="500" data-scale="6">
      start to build your own presentati
  </div>


  <div class="step slide" data-x="1500" data-y="15" data-z="0" data-rotate-x="10" data-rotate-y="1000" data-rotate-z="500" data-scale="6">
      start with
  </div>

I have two solutions here I can add attrs in the view so I just need to load content in template. and I can remove the div while the doc is ready?

    <script type="text/template" id="impress-demo-template">
    <div  id="impress">

    </div>
</script>

<script type="text/template" id="iunit-template">

  <div class="<%=step%>" data-x="<%=dataX%>" data-y="<%=dataY%>" data-z="<%=dataZ%>" data-rotate-x="<%=dataRotateX%>" data-rotate-y="<%=dataRotateY%>" data-rotate-z="<%=dataRotateZ%>" data-scale="<%=dataScale%>">
      <%=content%>
  </div>
</script>

Answer 1

View (properties description):

var IuntiView = AV.View.extend({
  className : 'step slide',
  attributes : {
    'data-x' : 1500,
    'data-y' : 15,
    'data-z' : 0,
    'data-rotate-x' : 10,
    'data-rotate-y' : 1000,
    'data-rotate-z' : 500,
    'data-scale' : 0
  }
});

Template:

<%= content %>

Edit (example - http://jsfiddle.net/vpetrychuk/rCZrK)

var AV = Backbone; // hack
var IuntiView = AV.View.extend({
  className : 'step slide',
  template : _.template('content'),
  constructor : function () {
    this.attributes = {
      'data-x' : 1500,
      'data-y' : 15,
      'data-z' : 0,
      'data-rotate-x' : 10,
      'data-rotate-y' : 1000,
      'data-rotate-z' : 500,
      'data-scale' : 0
    };
    AV.View.prototype.constructor.apply(this, arguments);
  },
  render : function () {
    this.$el.html(this.template());
    return this;
  }
});

new IuntiView().render().$el.appendTo(document.body);