如何在不重新渲染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的情况下更新视图？

回答

相关问题