使緩存的jQuery對象可用於Backbone中的多個視圖

我正在使用Backbone以及jQuery和requireJS。我想知道什麼是在Backbone中爲多個視圖提供緩存jQuery對象的好方法。比方說，我有一個瀏覽量，homeView，aboutView和contactView。使緩存的jQuery對象可用於Backbone中的多個視圖

在所有這些觀點我操縱DOM和此刻我需要建立每次一個新的jQuery包裝以下DOM元素：.side左，.side右，。左頁和.page-right。

什麼是最好的方式來只包裝這些元素一次，而不是總是創建一個新的實例？

第一個意圖是將所有模型添加到集合並在那裏緩存DOM元素。不幸的是，並非我所有的觀點都有一個模型。那我該如何處理呢？

在此先感謝您的任何建議。

下面的代碼顯示了我目前如何解決它的一個視圖。但其他人無法使用此功能，因爲他們沒有使用相同的模型。

PageModel.js

define([ 
    'underscore', 
    'backbone' 
], function(_, Backbone) { 

    var PageModel = Backbone.Model.extend({ 
     defaults: { 
      leftSide: $('#splitlayout div.intro > div.side-left'), 
      rightSide: $('#splitlayout div.intro > div.side-right'), 
      pageLeft: $('#splitlayout div.page-left'), 
      pageRight: $('#splitlayout div.page-right') 
     } 
    }); 

    return PageModel; 

});

PageView.js

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'global', 
    'models/video/VideoModel', 
    'views/video/VideoView' 
], function($, _, Backbone, Global, VideoModel, VideoView){ 

    var PageView = Backbone.View.extend({ 

     el: $("#splitlayout"), 

     events: { 
      'click .intro-content': 'resetLayout', 
      'click .back': 'backToIntro' 
     }, 

     render: function(){ 

      this.$el.addClass('reset-layout'); 
      this.model.get('pageLeft').on(Global.transEndEventName, this.onEndTransFn); 
      this.model.get('pageRight').on(Global.transEndEventName, this.onEndTransFn);    

     }, 

     initialize: function() { 

      _.bindAll(this); 

      this.videoModel = new VideoModel(); 
      this.VideoView = new VideoView({model: this.videoModel}); 

      this.render(); 

     }, 

     onEndTransFn: function() { 

      this.$el.addClass('reset-layout'); 
      $('html, body').scrollTop = 0; 

     }, 

     backToIntro: function(ev) { 

      ev.preventDefault(); 

      var dir = $(ev.currentTarget).hasClass('back-right') ? 'left' : 'right'; 

      this.$el.removeClass('open-' + dir); 
      this.$el.addClass('close-' + dir); 

     }, 

     resetLayout: function(ev) { 

      var layoutClass = $(ev.currentTarget).parent().hasClass('side-left') ? 'open-left' : 'open-right'; 

      this.$el.addClass(layoutClass) 
      this.$el.removeClass('close-right close-left reset-layout'); 

     }  

    }); 

    return PageView; 

});

來源

2014-01-23 enyce12

我使用Chaplin框架的骨幹，它有一個「重用」方法，可以幫助你。也許你可以閱讀源代碼有一個想法如何做 – pleasedontbelong

我寧可不想使用另一個框架..你是否知道下劃線中的內置重用方法？我還沒找到.. – enyce12

我要回避你的問題了一下，說，只是不知道。海事組織的觀點應該對其約束的要素及其子女負責（不管他們是更多的觀點還是標記）。如果你想在視圖之間進行通信，你應該使用一個事件總線（下面使用deafult Backbone但你可以定義你自己的）。因此，對於你的情況，我會做以下，

var PageView = Backbone.View.extend({ 
    ... 
    initialize: function() { 
     this.listenTo(Backbone, Global.transEndEventName, this.onEndTransFn); 
     ... 
    },

那麼無論視圖生成事件，

var VideoView = Backbone.View.extend({ 
    ... 
    events: { 
     'click div.page-left': 'eventFired', 
    }, 
    eventFired : function(){ 
     Backbone.trigger(Global.transEndEventName); 
    }

你真的不表明你的觀點的關係，所以這只是一個例子，外推。

來源

2014-01-23 19:19:18 Andrew

使緩存的jQuery對象可用於Backbone中的多個視圖

回答

相關問題