How can i close (remove its views) a region in a LayoutView?
I've tried with LayoutView.[region].close(), or with .destroy() but neither works (undefined functions).
With the eariler version of marionette, the close function worked, but i haven't found this function in the current docs, or in the code.
Okay, I found it under region docs. Calling reset() did the job.
Related
I am using UI Bootstrap for collapsing/expanding a div section based on user clicking a button similar to the example shown in the official site - UI Bootstrap-Collapse
I included the latest version of ui-bootstrap(0.14.2) but it was not showing the expected behavior. In particular the collapseDone() and expandDone() callbacks are never called after the $animateCSS is done the animations. (The animations are working properly, presumably because of the css transition property of the class 'collapsing' in twitter bootstrap.)
But when I inspected the UI Bootstrap site, I found that it's working properly as expected. (That's the class 'collapsing' is added during the animation and then removed after animation and then the class 'collapse' is added). So I checked the source code link for collapse collapse source code -github and found that finally is used for $animateCSS promise resolution rather than done in the ui.bootstrap.js code I included.
So could someone please explain the difference between finally and done methods of the $animateCSS function? The documentation [Angular Docs-$animateCSS][3] says that
there is also an additional method available on the runner called .done(callbackFn). The done method works the same as .finally(callbackFn), however, it does not trigger a digest to occur. Therefore, for performance reasons, it's always best to use runner.done(callback) instead of runner.then(), runner.catch() or runner.finally() unless you really need a digest to kick off afterwards.
So it looks like both should behave similarly. Could someone shed light on this, as there seems to be very little resources to learn about $animateCSS. (google search for $animateCss returns results for animate.css which seems to be part of the earler angular js verion (v1.2) - so that doesn't help)
I had forgotten to inject "ngAnimate" to my module. That way the animation by $animateCss was not successful, so the done() was never called. But finally will be called even if the animation is not successful.
I'm converting a page in a mvc application with a lot of inline jquery javascript to angular using typescript.
The first calls works fine but I have a problem: based on a selection in a dropdown, the event updates several controls in the view, make a few ajax calls and finally update the view with the data from the calls.
Seems the conversion is working fine, but at the end of the call the page isn't updated.
I tried to remove all the old jquery code to avoid problems.
batarang and java console reports no errors.
the final ajax call is done and the result shown in a debug.
All seems to work fine, but the page isn't updated.
How can I find the problem?
thanks
Without seeing any code, it's difficult to answer but if you bind an event to an element and want to update something in the callback, you will have to use $apply
scope.$apply(function () {
// your code
});
$apply will trigger a $digest cycle, and should be used when you want to update something while being outside angular's context.
Most likely you are not handling your asynchronous calls correctly. It's impossible to tell from your question but it is a very common mistake with symptoms as you describe.
Make sure you are updating your model within the .then() method of a promise returned from an $http request. For example
someFnDoingHttpRequest().then(function(data){
// updated the model with the data
})
Also (another common mistake) make sure someFnDoingHttpRequest() returns a promise.
If you want to "find the problem" then you can use the following option.
Go to Internet Explorer (10 or 11).
Select "Internet Options" from the settings menu.
Go to the "Advanced" tab (the last tab)
Settings are listed and select "Display a notification about every script error"
Deselect the "Disable Script debugging (Internet Explorer)" and "Disable script debugging (Other)"
Run the program again, you will get notification about the real issue that happens while displaying actual result.
I have followed tutorials such as this one and this one. At first glance they are quite simple as in how to add JQuery UI to Drupal 7. Nonetheless, when I apply them, all I get is that the function dialog is undefined. Here is what I have done:
template.php
function mytheme_preprocess_image(&$variables) {
drupal_add_library('system','ui.dialog');
}
chat_overlay.js
jQuery(document).ready(function(){
console.log("*********************Setting up click");
jQuery('#small_chat_wrapper #chat_message').click(function(){
console.log("*********************CLICKED CLICKED");
if (typeof jQuery.ui !== 'undefined')
console.log("loaded");
else
console.log("undefined");
jQuery('#chat_overlay').dialog('open');
});
})
The console logs print out wonderfully, and the if check prints out loaded. Nonetheless, when it gets to the line of .dialog(..) the Undefined error occurs. I don't know what else to try. Such a simple thing and it's becoming painful.
Help is very much appreciated.
Edit:
The site's Status Report has the following:
jQuery Update jQuery 1.7.1 and jQuery UI 1.8.7
My MISTAKE:
Change function mytheme_preprocess_image(&$variables) to function mytheme_preprocess_page(&$variables) . Goodness.
Now the UNDEFINED ERROR NO LONGER happens, BUT, even though the ui classes and divs are getting added, the UI CSS is not coming through (the dialog does not pop up).
Really would appreciate some help.
You should load the jquery library that you need either in the preprocess_html function of your template.php or in yourmodule_init hook like that:
<?php
function yourmodule_init(){
drupal_add_library('system', 'ui.dialog');
drupal_add_library('system', 'ui.draggable');
drupal_add_library('system', 'ui.sortable');
}
?>
The source: https://www.drupal.org/node/1172846
Using angular 1.2, I included the angular-mobile.js file and add the ngMobile module to my module dependencies list.
Directives 'ng-swipe-left' and 'ng-swipe-right' work well but the 'ng-click' doesn't seem faster. It seems that there's still this 300ms delay on ipad...
Is something more required to use this feature?
By the way, what's the difference between the module ngTouch and ngMobile? Swipe directive seems to works including one either.
Thanks!
I have the same issue, and I'm not using jQuery. I have resorted to fastclick, and the app feels much more responsive. Yes, ngTouch is the new version of ngMobile, but in its current state it can only be used for swiping, it seems.
It seems that the issue is known and happen when jQuery is loaded:
https://github.com/angular/angular.js/issues/2548
(according 'AngularJS 1.2 And Beyond' talk, ngTouch will be the new name of NgMobile)
Look at this answer, the solution works also for angular ng-click directive.
Basically you just need to do this in stop method of jquery-ui-draggable:
$('.selector').draggable({
stop: function(event, ui) {
// event.toElement is the element that was responsible
// for triggering this event. The handle, in case of a draggable.
$( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
}
});
I'm using the latest angular and ngtouch 1.2.10 and am also using jQuery. I'm still seeing the same issue you are. I added faskclick and it fixed it. Looks like there is at least one issue open on github for this problem so presumably this will be fixed at some point.
// This code should be added outside of and angularjs code.
window.addEventListener('load', function () {
FastClick.attach(document.body);
}, false);
I've decided that I am going to try and learn backbone.js by making a web app. This is the first time I have done anything extensive in javascript, so the answer to my problem may be right in front of my face.
I have the web app on github, along with a running version that doesn't work. The javascript console just says that something is undefined when I don't think it should be. Here's the error that chrome gives for line 30 of app.js:
Uncaught TypeError: Cannot read property 'el' of undefined
I've sort of been referencing the backbone-fundamentals example modular to-do app, and it doesn't seem to have any issues with a similar thing.
If anyone could point out what I am doing wrong, I would be most appreciative!
Thanks in advance!
Your Machine view render method was missing return this and by default all methods return undefined - that's why chaining didn't work
Edit: and a small tip:
jQuery, Underscore and Backbone register globally - and thanks to that you don't have to define them as dependencies every time - it's enough if you require them in your main script once and after that you can access them from the global scope as you normally would
In my case i was returning this without the return keyword. As i was using javascript and not coffeescript it failed on me. So, if you are using javascript use return this; instead of just this in the last line of the render() function.
I also had a problem when using this.collection.on('reset', this.render(), this). I instead had to use this.collection.on('reset', this.render.bind(this));