다른보기의 변경 사항을 기반으로보기를 제거하는 방법은 무엇입니까? 백본

Question

변경이 발생하면 새보기를 렌더링 할 수 있도록 다른보기의 변경 내용을 기반으로보기를 제거하려고합니다. 현재 검색 버튼을 클릭하면보기를 제거하고 다른보기를 추가하려는 컨테이너보기가 있습니다. 렌더링은 컨테이너 뷰에서 발생합니다 (모델로 뷰를 렌더링하고 템플릿을 추가 함). 그러나 컨테이너보기에서 검색보기의 변경 사항을 수신 대기 또는 허용하는 방법을 알지 못합니다. 컨테이너보기를 작성한 이유는 경로를 변경하지 않기 때문에 매개 변수가/search에서 변경 될 수 있기 때문입니다. to/page와 결과를 보여 주지만 컨테이너 뷰가 제거되고 라우터가 이것을 제어하더라도 라우터가 변경 사항을들을 수 있도록하려면 어떻게해야 하는가?

라우터를 사용하거나 컨테이너보기를 사용하여 방향을 청취하는 것은 변경 이벤트 수신 방법을 알아야하기 만하면됩니다.

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'models/search', 
    'text!templates/search.html', 

], function($, _, Backbone, SearchM, SearchT){ 

    var Search = Backbone.View.extend({ 
    //model: SearchM, 
    el: $("#Sirius"), 

    events: { 
     'submit #searchMusic': 'search' 
    }, 
    initialize: function() { 
     this.listenTo(this.model, 'change:display', this.displayChanged); 
    }, 
    displayChanged: function() { 
     console.log('display changed'); 
    }, 
    search: function (e) { 
     e.preventDefault(); 
     var that = this; 
     //post instance to the server with the following input fields 
     that.model.save({ 
     channel: $('#channel').val(), 
     week: $('#week').val(), 
     year: $('#year').val(), 
     filter: $('#filter').val() 
     },{success: that.storeMusic(that) }); 

     // on success store music on client-side localStorage 
    }, 
    storeMusic: function (that, response, options) { 
     console.log('store'); 
     //create new instance of the localStorage with the key name 
     that.model.localStorage = new Backbone.LocalStorage("music"); 
     var that = this; 
     that.clearLocalStorage(that); 

     that.saveToLocalStorage(response, that); 
     }, 
     clearLocalStorage: function (that) { 
     console.log('clear'); 

      //removes the items of the localStorage 
      that.model.localStorage._clear(); 

      //pops out the first key in the records 
      that.model.localStorage.records.shift(); 

     }, 
     saveToLocalStorage: function (response, that) { 
      console.log('save'); 
      console.log(that); 
      that.model.save({music: response}, {success: that.nextPage(that)}); 
     }, 


     nextPage: function (that) { 
      console.log('entered next page'); 
      that.model.set('display', true); 

     } 

    }); 
    return Search; 
}); 

Answer 1

: 여기

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'models/search', 
    'views/search', 
    'text!templates/search.html', 
    'views/page', 
    'text!templates/page.html' 
    //'collections/songs', 
    //'views/song', 


], function($, _, Backbone, SearchM, SearchV, SearchT, PageV, PageT){ //Song, Songs, SongV, 

    var Container = Backbone.View.extend({ 
    el: $("#Sirius"), 

    initialize: function() { 

    }, 

    render: function() { 
     console.log('container rendered') 
     //create new instance of the model 
     var searchM = new SearchM(); 
     var search = new SearchV({model: searchM}); // 
     this.$el.html(SearchT); 
     search.render(); 
     //search.listenTo(this.model, 'change:display', this.displayChanged);   
    } 

     }); 
    return Container; 
}); 

검색보기위한 코드이다 : 여기

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    //'views/page', 
    //'views/search', 
    'views/container' 

], function($, _, Backbone, Container) { //Page, Search 
    var AppRouter = Backbone.Router.extend ({ 
     routes: { 
      'page/:id': 'showPage', 
      's': 'showView' ///:page 
     } 
    }); 

    var initialize = function() { 
     var app_router 
     app_router = new AppRouter; 
     // Extend the View class to include a navigation method goTo 
     Backbone.View.prototype.goTo = function (loc) { 
      app_router.navigate(loc, true); 
     }; 

     console.log('router file hit'); 
     app_router.on('route:showPage', function (id) { 

      var page = new Page(); 
      page.render(id); 
     }); 

     app_router.on('route:showView', function() { 
      console.log('search file hit'); 
      var container = new Container(); 
      container.render(); 

     }); 

     Backbone.history.start(); 

    }; 

    return { 
     initialize: initialize 
    }; 
}); 

용기보기위한 코드이다 : 여기

라우터에 대한 코드

저는 응용 프로그램의 다른 부분들 사이에서 통신 할 수 있도록하기 위해 일종의 조정자 패턴을 사용합니다. o 단단히.

var myApp = {}; // namespace for views, models, utilities etc. 
_.extend(myApp, Backbone.Events); 

컨테이너와 검색간에 통신하려면. 아래 관련 부품 :

var Container = Backbone.View.extend({ 
    initialize: function() { 
    this.listenTo(myApp, 'changeOccured', function(){ /* do something */ }); 
    } 
}); 


var Search = Backbone.View.extend({ 
    displayChanged: function() { 
    myApp.trigger('changeOccured'); 
    } 
}); 

이 방법의 거꾸로하다 할 수 있습니다 listenTo/trigger 미래에 Search보기 코드 덤비는없이 다른 뷰/모델/컬렉션에서 changeOccured 이벤트입니다.