Databases
StackOverflow2013
Postsdbo
POBackboneJS - Navigation and display issue
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackboneJS - Navigation and display issue
    primarykey
    data
    text
    <p>I have setup a main navigation menu with 4-5 anchors and the related views. Its the typical "home", "about", "news" etc menu. In one of the views, lets say "news" there is an additional menu with 3 anchors, lets say "national", "international" and "others", when you click those, it displays the related view inside the "news" view and its only supposed to be displayed there. So far so good. But then, when i click on "about" anchor on the main navigation, it shows me the about view, but also still the additional menu from the "news" view and of course I don't want that. So, what to do here?</p> <p><strong>[UPDATE]</strong>: I made some changes, but still it does not work! </p> <p>I added backbone.view-prototype code into my mainpage.js:</p> <pre><code>define(function (require) { 'use strict'; Backbone.View.prototype.close = function(){ this.remove(); this.unbind(); if (this.onClose){ this.onClose(); } } var AppRouter = require('../app/routers/router'); $(function () { var App = new AppRouter(); }); }); </code></pre> <p>and i added the close function into my view:</p> <pre><code>define(['backbone','handlebars', 'text!templates/News.html'], function(Backbone,Handlebars, Template) { 'use strict'; var NewsView = Backbone.View.extend({ template: Handlebars.compile(Template), events: { }, initialize: function () { _.bindAll(this); }, render: function() { $(this.el).html(this.template()); return this; }, close: function(){ this.remove(); this.unbind(); } }); return NewsView; } ); </code></pre> <p>My router looks like this (short version):</p> <pre><code> var Router = Backbone.Router.extend({ routes: { '': 'index', 'pages/about' : 'about', 'pages/news' : 'news', 'pages/news/national' : 'national', 'pages/news/international' : 'international', 'pages/news/other' : 'other', 'pages/contact' : 'contact' }, //Initializing the application initialize: function () { var self = this; //Collections this.mainMenuCollection = new MainMenuCollection(); this.newsMenuCollection = new NewsMenuCollection(); //Views this.mainMenuView = new MainMenuView({el:'#mainMenu', collection:this.mainMenuCollection}); this.mainMenuCollection.fetch({success: function(collection) { self.mainMenuView.collection=collection; self.mainMenuView.render(); }}); this.newsMenuCollection.fetch({success: function(newscollection) { self.newsMenuView.newscollection=newscollection; self.newsMenuView.render(); }}); Backbone.history.start({ pushState: false }); }, //Default route. index: function () { var self = this; }, about: function() { this.aboutView = new AboutView({el:'#topContent'}).render(); }, news: function() { this.newsView = new NewsView({el:'#topContent'}).render(); this.subMenuView = new SubMenuView({el:'#subMenu', collection:this.subMenuCollection}).render(); }, about: function() { this.aboutView = new AboutView({el:'#topContent'}).render(); }, contact: function() { this.contactView = new ContactView({el:'#topContent'}).render(); }, national: function() { this.nationalView = new NationalView({el:'#subContent_2'}).render(); }, international: function() { this.internationalView = new InternationalView({el:'#subContent_2'}).render(); }, other: function() { this.otherView = new OtherView({el:'#subContent_2'}).render(); } }); return Router; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSHT
    1. USSHT
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COThe problem you describe is too broad to tell what it is just from your router. Try replicating the problem in a jsfiddle http://jsfiddle.net/, then edit your question and paste the link.
      singulars
      1. POBackboneJS - Navigation and display issue
      1. USjcvandan
    2. COisnt there some "onchange" function?
      singulars
      1. POBackboneJS - Navigation and display issue
      1. USSHT
    3. CONo there is no on change function, you have to manually call a function on every route if you want to do something like that. If you did do that though, you could manually empty the DOM elements that need to be cleared each time, then you may solve your problem with previous views still being visible.
      singulars
      1. POBackboneJS - Navigation and display issue
      1. USjcvandan
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload