как добавить div непосредственно в элемент en в BackboneJs

Question

как добавить div непосредственно в элемент en в BackboneJs

0

Вот проблема, которую я встретил,

  <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>

это генерируется 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()
        });

    }

});

Сначала здесь был tagTame = "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 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>

У меня есть два решения, здесь я могу добавить attrs в представление, поэтому мне просто нужно загрузить контент в шаблон. и я могу удалить div, пока документ готов?

    <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>

crazy_phage 23 март 2014, в 09:20

Источник

Теги:

javascript

jquery

backbone.js

backbone-views

1 ответ

Ещё вопросы

Vitalii Petrychuk · Accepted Answer · 2014-03-23T07-07-00.000Z

Вид (описание свойств):

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
  }
});

Шаблон:

<%= content %>

Изменить (пример - 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);

Эти атрибуты генерируются динамически? И эти атрибуты из моделей? Я новичок в магистрали, так что спасибо, что научили меня этому?
Да - backbonejs.org/#View-attributes . Я бы предложил прочитать документацию, она довольно маленькая и довольно информативная.
ну, я имею в виду, могу ли я динамически генерировать код типа «data-x»: dataX в поле зрения? dataX - значение текущего узла.
Да, переопределив конструктор. Я создам демо в течение 10 минут.