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>