如何在不重新渲染BackboneJs的情況下更新視圖？

我試圖做顯而易見的，更新模型更改視圖（在這種情況下，添加一個新的）。它實際上有效，但問題是添加模型時整個視圖會被重新渲染。新的數據實際上並不是真的被追加到視圖中，但幾乎所有的東西都是使用「html（）」方法重新加載的。如何在不重新渲染BackboneJs的情況下更新視圖？

你知道一種更有效的解決方法嗎？

<body> 
<div class="page"></div> 

    <script type="text/template" id="myTemplate"> 
     <ul> 
      <% for (var i = 0; i < library.length; i++) { %> 
        <li> <%= library[i].title %></li> 
        <li> <%= library[i].artist %></li> 
        <li> <%= library[i].track %></li> 
       <br> 
      <% } %> 
     </ul> 

     <input id="inputTitle" placeholder="enter title" type="text"> <br> 
     <input id="inputArtist" placeholder="enter artist" type="text"> <br> 
     <input id="inputTrack" placeholder="enter title" type="number"> <br> 
     <button id="addItem">add</button> 
    </script> 

    <script type="text/javascript"> 

     var Song = Backbone.Model.extend({ 
      initialize: function() 
      { 
       this.on('add',function(){ 
        albumview.render(); 
       }); 
      } 
      ,defaults: 
      { 
       title: "no title", 
       artist: "no artist", 
       track: 0 
      } 
     }); 

     var AlbumView = Backbone.View.extend({ 
      initialize: function() 
      { 
       this.render(); 
      }, 
      render: function() 
      { 
       var self = this; 
       var output = _.template($('#myTemplate').html(),{'library': self.collection.toJSON()}); 

       self.$el.html(output); 
       return self; 
      }, 
      events: 
      { 
       'click #addItem' : 'addItem' 
      }, 
      addItem: function() 
      { 
       var TitleValue = $('#inputTitle').val(); 
       var ArtistValue = $('#inputArtist').val(); 
       var TrackValue = $('#inputTrack').val(); 

       var self = this; 

       self.collection.push({ 
        title: TitleValue, 
        artist: ArtistValue, 
        track: TrackValue 
       }); 

      } 
     }); 

     var Album = Backbone.Collection.extend({ 
      model: Song 
     }); 

     var song1 = new Song({ 
      title: "Trouble on my mind", 
      artist: "Pusha-T", 
      track: 3 
     }); 

     var song2 = new Song({ 
      title: "Yonkers", 
      artist: "Tyler The Creator", 
      track: 2 
     }); 

     var album = new Album([song1,song2]); 

     var albumview = new AlbumView({ 
      el: '.page', 
      collection: album 
     }); 

    </script> 
</body>

來源

2014-03-31 user254883

您可以偵聽模型上的特定更改，然後只更新這些屬性，例如，您可以列出「change：title」事件，然後使用刷新標題方法找到適當的元素並更新它（for例如'this。$ el.find（'。title'）。html（this.model.get（'title'））;' – Jack

首先，我會避免從模型中調用視圖的渲染方法。其次，你確定要爲每首歌曲製作一張新的專輯視圖嗎？好像你albumview，它保持到您的相冊集的引用，只需要一個songview，或者其它某種這樣的結構：

var AlbumView = Backbone.View.extend({ 
    initialize: function() { 
     this.listenTo(this.collection, 'reset', this.render); 
     this.listenTo(this.collection, 'add', this.addOne); 
    }, 
    render: function() { 
     this.addAll(); 
     return this; 
    }, 
    addAll: function() { 
     this.$el.empty(); 
     this.collection.each(this.addOne, this); 
    }, 
    addOne: function (song) { 
     var songView = new SongView({ model: song }); 
     this.$el.append(songView.render().el); 
    } 
}); 

var SongView = Backbone.View.extend({ 
    render: function() { 
     // whatever you would do for just one song 
    } 
});

這是渲染集合（專輯）視圖和項目的通用模式（歌曲）的看法。

來源

2014-03-31 16:03:21 kinakuta

如何在不重新渲染BackboneJs的情況下更新視圖？

回答

相關問題