Как переключить представление с помощью маршрутизатора в backbone.js

У меня возникла проблема с тем, что переключатели просмотра с маршрутизатором.Как переключить представление с помощью маршрутизатора в backbone.js

Мое приложение написано с помощью Backbone.js. Он имеет 2 вида, ApplicationView и ApplicationSubView.

Первоначально я думал, что если произошло нажмите событие затем через маршрутизатор должен перейти на страницу с

Например, кто запускал элемент, имеющий about класс, то необходимо exprience перемещать и повторно оказанные страницы

var app = app || {}; 
$(function() { 
    'use strict'; 
    var ApplicationView = Backbone.View.extend({ 
     //bind view to body element (all views should be bound to DOM elements) 
     el: $('body'), 
     //called on instantiation 
     initialize: function() { 
      //set dependency on ApplicationRouter 
      this.router = app.Router; 
      this.subView = new ApplicationSubView(); 
      //call to begin monitoring uri and route changes 
      Backbone.history.start(); 
     }, 
     showSpinner: function() { 
      console.log('show the spinner'); 
     }, 

     hideSpinner: function() { 
      console.log('hide the spinner'); 
     }, 
     loadSubView: function() { 
      this.showSpinner(); 
      var subView = new SubView(); 
      subView.on('render', this.hideSpinner); 
     } 
    }); 

    var ApplicationSubView = Backbone.View.extend({ 
     events: { 
      'click ul.pills li.home-pill a': 'displayHome', 
      'click ul.pills li.about-pill a': 'displayAbout', 
      'click ul.pills li.contact-pill a': 'displayContact' 
     }, 

     displayHome: function() { 
      this.trigger('render'); 
      console.log('a subView render'); 
      this.router.navigate("home", true); 
      return this; 
     }, 

     displayAbout: function() { 
      this.trigger('render'); 
      console.log('a subView render'); 
      this.router.navigate("about", true); 
      return this; 
     }, 

     displayContact: function() { 
      this.trigger('render'); 
      console.log('a subView render'); 
      this.router.navigate("contact", true); 
      return this; 
     } 
    }); 
    //load application 
    app.view = new ApplicationView(); 
});

источник

2016-12-10 Sean Sin

Хотя я не могу понять описание вопроса, я вижу много улучшений, которые необходимо выполнить, поэтому я сделал полный рефакторинг вашего кода.

маршрутизации только обработки изменений в URL, так что вы можете использовать якорные теги непосредственно, без явных событий и navigate вызовов.

Это все, что вам нужно для запуска маршрутов.

<body> 
    <ul class="pills"> 
     <li><a href="#/">Home</a></li> 
     <li><a href="#/about">About</a></li> 
     <li><a href="#/contact">Contact</a></li> 
    </ul> 
    <div id="content"></div> 
</body>

<div id="content"></div>? Это содержимое div, и на этом будут идти другие страницы. Мы справимся с использованием «макета»:

var app = app || {}; 
(function() { 
    'use strict'; 
    var views = app.view = app.view || {}; 
    views.Application = Backbone.View.extend({ 
     initialize: function() { 
      // caching the jQuery object on init 
      this.$content = this.$('#content'); 
     }, 
     setContent: function(view) { 
      var content = this.content; 
      if (content) content.remove(); 
      content = this.content = view; 
      this.$content.html(content.render().el); 
     }, 
    }); 

    // make a view for each sub-page 
    views.Home = Backbone.View.extend({ /* ... */ }); 
    views.About = Backbone.View.extend({ /* ... */ }); 
    views.Contact = Backbone.View.extend({ /* ... */ }); 
})();

Затем вам необходимо определить маршрутизатор, который обрабатывает эти маршруты.

var app = app || {}; 
(function() { 
    'use strict'; 
    var views = app.view = app.view || {}; 

    app.Router = Backbone.Router.extend({ 
     routes: { 
      'about': 'aboutRoute', 
      'contact': 'contactRoute', 
      // put the catch-all last 
      '*home': 'homeRoute', 
     }, 
     initialize: function() { 
      // create the layout once here 
      this.layout = new views.Application({ 
       el: 'body', 
      }); 
     }, 
     homeRoute: function() { 
      var view = new views.Home(); 
      this.layout.setContent(view); 
     }, 
     aboutRoute: function() { 
      var view = new views.About(); 
      this.layout.setContent(view); 
     }, 
     contactRoute: function() { 
      var view = new views.Contact(); 
      this.layout.setContent(view); 
     } 
    }); 
})();

И использовать его, когда документ будет готов:

$(function() { 
    var router = new app.Router(); 
    Backbone.history.start(); 
});

источник

2016-12-11 01:35:52

спасибо так много !! я не очень хорошо писал русский язык ... так что вам трудно понять мой вопрос, но, очень любезно написал ответ, я пытаюсь это сделать !! –

Как переключить представление с помощью маршрутизатора в backbone.js

ответ

Смежные вопросы