Backbone view

0

Witam
Chciałem zrobić tabelę z użytkownikami, zdefiniowałem dwa widoki. Jeden renderuje poszczególne wiersze (sub widok) i on działa poprawnie, a drugi ma renderować całą tabelę. Niestety przy renderowaniu w miejscu danych tabeli (wierszy) pojawia się informacja [object HTMLDivElement]. Korzystam z template dla całej tabeli bo chciałem ją wyrenderować i umieszczać dynamicznie na stronie na zmianę z innymi elementami

<script id="templateUsersList" type="text/template">
  <div class="ui segments" >
    <div class="ui clearing segment">
      <table class="ui fixed single line celled table very compact striped selectable">
        <thead>
          <tr>
            <th>Login</th>
            <th>Imie i nazwisko</th>
          </tr>
        </thead>
        <tbody><%= tbodyHTML %></tbody>
      </table>
    </div>
  </div>
</script>


(function(){
  App.Views.UsersList = Backbone.View.extend({
    initialize    : function(){
      this.listenTo(this.collection, "sync", this.render);
    },
    tagName       : "div",
    template      : _.template ($("#templateUsersList").html()),
    render        : function(){
      this.collection.each(this.addModel, this);
      html = this.template({tbodyHTML : this.el});
      App.Regions.appEditDashboard.append(html);
      return this;
    },
    addModel      : function(user){
      userView = new App.Views.UserItem({model : user});
      this.$el.append( userView.render().el );
    }
  });
})();



<script id="template-user-item" type="text/template">
      <td><%= username %></td>
      <td><%= first_name + " " + last_name %></td>
</script>



(function(){
  App.Views.UserItem = Backbone.View.extend({
    tagName       : "tr",
    template      : _.template($("#template-user-item").html()),
    render        : function(){
      html = this.template( this.model.toJSON());
      this.$el.append(html);
      return this;
    }
  });
})();





0

pomogła zamiana z

html = this.template({bodyHTML : this.el} );

na

  html = this.template({bodyHTML : this.$el.html()} );

0

daj to jako jsfiddle lub plunker

0

Witam
Niestety rozwiązanie w postaci :

html = this.template({bodyHTML : this.$el.html()} );

nie dało dobrego rezultatu. Co prawda lista użytkowników wyświetliła się w tabeli ale nie jako obiekty DOM i np. podpięcie event'a nie było możliwe. Zmieniłem kod jak poniżej, dołączam (append) do tabeli (po </thead>) wyrenderowane poszczególne wiersze w tagu </tbody> i wszystko działa.

<script id="template-users-list" type="text/template">
  <div class="ui segments" >
    <div class="ui clearing segment">
      <table class = "ui fixed single line celled table very compact striped selectable" id="users-list-table">
        <thead>
          <tr>
            <th>Login</th>
            <th>Imie i nazwisko</th>
          </tr>
        </thead>
        </table>
      </div>
    </div>
</script>

(function(){
  App.Views.UsersList = Backbone.View.extend({
    initialize    : function(){
      this.listenTo(this.collection, "reset", this.render);
    },
    tagName       : "tbody",
    template      : _.template($("#template-users-list").html()),
    render        : function(){
      var html = this.template();
      App.Regions.appEditDashboard.html(html);
      this.collection.each(this.addModel, this);
      $("#users-list-table").append(this.el);
      return this;
    },
    addModel      : function(user){
      var userView = new App.Views.UserItem({model : user});
      this.$el.append( userView.render().el );
    }
  });
})();

<script id="template-user-item" type="text/template">
      <td><%= username %></td>
      <td><%= first_name + " " + last_name %></td>
</script>

(function(){
  App.Views.UserItem = Backbone.View.extend({
    tagName       : "tr",
    template      : _.template($("#template-user-item").html()),
    render        : function(){
      html = this.template( this.model.toJSON());
      this.$el.append(html);
      return this;
    }
  });
})();

1 użytkowników online, w tym zalogowanych: 0, gości: 1