We Keep Coding

Destroy Xml view sapui5

I have an App not develloped in Sapui5 at all. But I loke the Grid Table and its option, therefore I integrate it into an Div dedicaced for it.
This is my Code:
sap.ui.getCore().attachInit(function () {
sap.ui.require([
], function () {
new sap.ui.xmlview({
viewName : "sap.ui.demo.cart.view.DcpTable"
}).placeAt("vueAppSales");
})
}
);
I injected this div with Ajax.
When i leave this page and i come back to this page, the same code was launched another time and the xmlview was duplicate.
How can i handle that to test if the element is create or not to duplicate the view?
Thanks

you can give an id to your view and after that you can check if your view was created already or not
sap.ui.getCore().attachInit(function () {
sap.ui.require([
], function () {
var myView = sap.ui.getCore().byId('myView')
if(!myView){
myView = new sap.ui.xmlview({
id: 'myView'
viewName : "sap.ui.demo.cart.view.DcpTable"
})
}
myView.placeAt("vueAppSales");
})
}
);
but its only a guess

Pretty routing with total.js (like 'base_url/#username')

I'm new to node.js, have been using Ruby and RoR.
I'd like to show a view for user view with a pretty routing.
In Rails, I can handle with code like this:
get '#:username' => 'users#show'
So I tried in Total.js as same, but error appeaerd with 404: Not found:
exports.install = function() {
F.route('/#{username}', view_user);
}
How can I get my user view with localhost:8000/#my_name in total.js?

You must remove # from the route:
exports.install = function() {
F.route('/{username}/', view_user);
};
function view_user(username) {
if (!username.startsWith('#')) {
this.throw404();
else
this.plain(username);
});
Thanks.

Backbone View won't render on first page load

I have this strange issue where a view doesn't show up when I go to the page. However, if I refresh the page, it'll appear.
In my router, I tried to render 2 views like so:
tags: function(tags) {
self = this;
self.multipleTags = tags.split('/');
self.tagsArray = $.grep(self.multipleTags, function(item,index) {
return (item != '');
});
var browseHeader = new BrowseHeader;
var content = new tagsView({query:self.tagsArray});
},
I'm having trouble with my BrowseHeader though but the tagsView works fine. I did try removing my tagsView to see if maybe they were conflicting. However, even with a single view rendering, the header still wouldn't show up until I refresh the page.
Here is what I'm doing in my BrowseHeader view:
var browseHeader = Backbone.View.extend({
initialize: function() {
this.render();
},
template: function() {
dust.render('dust/browseHeader','', function(error, output) {
$('#wrapper').append(output);
});
},
render: function() {
this.template();
},
el: '#wrapper',
events: {
'click .academy_filter' : "click_filter"
},
click_filter: function(event) {
target = event.target;
$('.academy_filter').removeClass('active');
$(target).addClass('active');
EventBus.trigger('header:click_filter', target);
}
});
When I console.log the output, it does display the html for the output despite it not being shown on the page. So I know my dust template is working. When I simplify my BrowseHeader render function to just $('#wrapper').append("this"); I still experience the same issue.
Any ideas?
Update: Apparently it has something to do with browser and pushState because when I changed my router to the following, it worked fine.
Backbone.history.start({pushState: true});

As far as I can tell, there's nothing wrong with your view. This is most likely a timing issue. Your view is probably being initialized (and therefore rendered) before #wrapper exists in the DOM. My guess is that if you try the following, the output will be 0:
dust.render('dust/browseHeader','', function(error, output) {
console.log($('#wrapper').length);
$('#wrapper').append(output);
});
Make sure the view is being created after the DOM has finished loading, like so:
$(document).ready(function() {
var header = new browseHeader();
});

How to retain Javascript state on page change

I have an accordion style navigation list set up so that when categories are clicked it opens up to show sub-categories that link to pages.
What I would like to do is have the accordion navigation list keep it's open or closed state when the new page opens.
I've gathered that cookies work to retain the state on refresh, but how do I retain the state when a different page is visited? All the pages have the same accordion navigation list.

Try Web Storage. Store the state of the tabs on page unload, restore the state on the page load event.

I found a solution, it uses the accordian plug-in found here, http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi and the jquery cookie.js plug-in
I added id's to the header anchor tages in the HTNL mark-up like so,
<li>
<a id="m1" class="label" href="#">Sound/Audio Systems</a>
<ul class="acitem">
<li>PA Systems</li>
<li>Loudspeakers</li>
<li>Microphones </li>
<li>DJ Equipment</li>
<li>Sound Processing Equipment</li>
</ul>
</li>
And modified the accordian.js code, I added the lines beginning with $.cookie, and the If statement in the document.ready funciton.
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active'),
currentID = "";
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
currentID = $(this).prev().attr('id');
$.cookie('menustate', currentID, {expires: 2, path: '/'});
}
else {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
currentID = $(this).prev().attr('id');
$.cookie('menustate', currentID, {expires: 2, path: '/'});
});
return false;
}
}
}
);
});
};
$(document).ready(function() {
$('.menu').initMenu();$('#side-navigation_frame').show();
if ($.cookie('menustate')) {
var anchor = "",
elementID = $.cookie('menustate');
anchor = document.getElementById(elementID);
$(anchor).addClass('active');
$(anchor).next().show();
}
});
It works nicely, not bad for a beginner, thanks for all the advise.
Rob Fenwick

Cookies "retain state" across the full path and domain for which they are specified. So if you can get them to work for just one page, you should have them work automatically on all pages of your site.

You can still use cookies, you just have to make sure they're not specific to the one page. For example:
document.cookie = 'openitem=5; expires=somedate; path=/';
will be accessible to all pages on the site. More about cookies.

Ok so I took a look at the library you are using, it's a decent library and all but you might find it easier to find solutions to your problems if you use a more standard library like jQuery UI, it has an accordion control http://jqueryui.com/demos/accordion/ and like I mentioned there are so many people using it that the answer to most problems can be found.
But like I mentioned I did take a look at your library. As others have mentioned you would use a cookie to store the value. This library supports 'pre expanding' a particular section of the accordian, to do that you would add the expand class to the element. You can either do that server side or you can do it using JavaScript before initMenu() is called.
The other less elegant option is to trigger the click event on the anchor tag after the call to initMenu. Finally you can use jQuery's show() to show expand the section without animation.
The first thing you have to do is find out which section was clicked on, then you would store that sections name in a cookie. On page load you would get that value and expand the appropriate according section. This is what the code should kinda look like - note this is psuedo code and you have fill in the appropriate parts.
$(function() {
$(".menu.collapsible .label").click(function() {
var accordianSection = $(this).text();
rememberSection(accordianSection);
});
var section = recallSection();
if(section !== undefined) {
expandSection(section);
}
});
The expandSection function can look something like this:
var sectionLink = $(".menu.collapsible .label").filter(function() {
return $(this).text() == section;
});
sectionLink.trigger('click');

Using Backbone.Router for a slideshow

I'm creating a slideshow using Backbone.js. My slideshow view is finished, each slide is a model and all the models are inside a collection. Now I want to apply a little hashbang magic to my slideshow :-)
This is my code structure
application.js
models/slideshow/slide.js
collections/slideshow/slides.js
views/slideshow.js
In application.js I create my router:
var App = {};
App.Modules = {
Views: {},
Models: {},
Collections: {}
};
App.slideshow = undefined; // Use this to maintain state between calls.
App.router = (function() {
var Router = Backbone.Router.extend({
routes: {
'slideshow/:id/:page': 'slideshow'
},
slideshow: function(id, page) {
// Whenever this route handler triggers, I want to either:
// 1) Instantiate the slideshow, or:
// 2) Change the page on an already instantiated slideshow
if (App.slideshow && App.slideshow.options.id === id) {
App.slideshow.goToPage(page);
} else {
App.slideshow = new App.Modules.Views.Slideshow({
id: id,
page: page
});
}
}
});
return new Router;
})();
// Using jQuery's document ready handler.
$(function() {
Backbone.history.start({
root: '/'
});
});
This works as I expect. My slideshow works as an overlay so no matter what page it's instantiated on, it will just show itself on top of the existing document.
My first question is how do I close the slideshow (App.slideshow.close()); when the user hits the browser back button or navigates to another hashbang, which doesn't follow the /slideshow/:id/:page syntax?
My last question has to do with the 'navigate' method in Routers. In my slideshow view, I make sure to update the hash fragment whenever the page changes. This is what I do in my view:
pageChange: function(page) {
App.router.navigate('slideshow/' + this.options.id + '/' + page, false);
}
This makes sure the fragment gets updated so that the user at any point can copy the URL and it will open on the same page. The problem is that my 'slideshow' method in my instantiated router triggers even though I pass false in the second 'navigate' parameter (triggerRoute). Why is this?

So, I think I've figured it out. Please let me know if there are cleaner ways to do this.
After reading http://msdn.microsoft.com/en-us/scriptjunkie/hh377172 I saw you can do this in Backbone.js:
var router = Backbone.Router.extend({
routes: {
'*other': 'defaultRoute'
},
defaultRoute: function() {
if (App.slideshow) App.slideshow.close();
}
};
This makes sure everything that doesn't match /slideshow/:id/:page will close the slideshow if it's been instantiated.
With regard to 'navigate' apparently it's because I did App.vent = _.extend({}, Backbone.events); Apparently, I have to do:
App.vent = {};
_.extend(App.vent, Backbone.events);