I just updated from Parsley 2.0.6 to 2.7.2 and my config doesn't work anymore.
This is my config.
window.ParsleyConfig = {
errorClass: 'has-error',
successClass: 'has-success',
classHandler: function(Field)
{
return Field.$element.parents('.form-group');
},
errorsContainer: function(Field)
{
return Field.$element.parents('.form-group');
},
errorsWrapper: '<span class=\"parsley-help-block\"></span>',
errorTemplate: '<div></div>',
};
I couldn't find any related documentation in the documents.
It probably still works as long as you set ParsleyConfig before loading the library.
Parsley used to support different ways (with ParsleyConfig and ParsleyExtend of being configured, before & after loading, but we're moving away from this. Best is to load the library first (always), then configure it with $.extend(window.Parsley.options, {...}) as in the doc if need be.
Sorry about the confusion.
Related
I am able to implement monaco-editor in AngularJS but in case if user refresh the page monaco through an error saying that "monaco is not defined" this is because monaco is loading lazy.Is there any other way monaco can load immediately. Here is the code..
resolve: {
srcipts: function (lazyScript) {
return lazyScript.register([
"monaco-editor/min/vs/loader.js",
"monaco-editor/min/vs/editor/editor.main.nls.js",
"monaco-editor/min/vs/editor/editor.main.js"
]).then(function () {
// console.log(require);
require.config({ paths: { 'vs': 'monaco-editor/min/vs' } })
// console.log(monaco)
})
}
}
this are the link to i refereed
Lazy-load MonacoEditor
https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-amd.md
https://microsoft.github.io/monaco-editor/playground.html
help me with this issue
This isn't exactly the answer you were looking for, but I had the same problem with monaco in Angular 1.x. I ended up implementing monaco inside of an iFrame. Makes it a bit difficult, but it loads much easier than with AMD loading.
I know it's far from an ideal solution, but I basically ended up doing the following in a Directive that wraps the editor.
function delayedInitialization() {
if (typeof window.monaco === 'undefined') {
$timeout(delayedInitialization, 200);
} else {
initialize();
}
}
One could perhaps make that a bit cleaner by packaging the editor in a way that allowed to listen for an event of sorts, but for now this works for our need.
This is the first time I am using Backbone and I seem to be stuck on the basics, so bear with me.
I just want to use Backbone for Routing, I'm currently testing it within the News section of my site but I can't get the routes to trigger the functions I want.
Here' my code:
var NewsRouter = Backbone.Router.extend({
routes: {
"*news": "init",
"news:tmpl": "loadTemplate",
},
init: function(params) {
//$("#main").load("/news/all");
console.log('news called')
},
loadTemplate: function(tmpl) {
console.log('loadTemplate function called')
}
});
var news_router = new NewsRouter;
Backbone.history.start();
I have this route working fine:
mysite.dev/news/ - console shows "news called"
mystic.dev/news/interviews - should call loadTemplate()
What am I mssing?
You missed slash after "news" in the route for 'loadTemplate':
"news/:tmpl": "loadTemplate",
Note that in your case router is configured only for hash-based navigation (like '#news/interviews' ). You may enable URL-based navigation by specifying additional options for 'start' method:
Backbone.history.start({ pushState: true });
I've tested. This works.
var NewsRouter = Backbone.Router.extend({
routes: {
"news": "init",
"news/:tmpl": "loadTemplate",
},
init: function(params) {
//$("#main").load("/news/all");
alert('news called');
},
loadTemplate: function(tmpl) {
alert('loadTemplate function called: ' + tmpl);
}
});
var news_router = new NewsRouter;
Backbone.history.start();
Only updated below part.
routes: {
"news": "init",
"news/:tmpl": "loadTemplate",
},
Basically, you also need to remove * (asterisk) apart from missing slash as answered by #Vitaliy Fedorchenko.
Backbone code is not as complex as jQuery. It's pretty readable. So best thing is go to code and read rather than finding documentation. I don't understand regex as much, but if you see splatParam variable, I think it is treating asterisk as wild match. Anyone can please correct me if I'm wrong.
I'm working on building an extensible automated test suite with Protractor (angularJS/Jasmine framework).
As long as all of my variables and functions and jasmine are in the same file, it runs semi-okay.
But every effort I make to break it into export/require is a nightmare.
Is there a tool that will just find the parts of my test and automatically reformat it and break it into individual files and folders, so that the thing will actually run?
Thanks!
I don´t know a tool for what you want. However if I were you, I would keep working with node's way of sharing files (export/require). Once you understand it, if you keep it clean and tidy, you could grow your app in a "clean" way.
EDIT:
As #MBielski said, Page Objects Model is also helpful when maintaining you test code.
Definition from the Selenium team:
Page Object is a Design Pattern which has become popular in test
automation for enhancing test maintenance and reducing code
duplication. A page object is an object-oriented class that serves as
an interface to a page of your AUT. The tests then use the methods of
this page object class whenever they need to interact with that page
of the UI. The benefit is that if the UI changes for the page, the
tests themselves don’t need to change, only the code within the page
object needs to change. Subsequently all changes to support that new
UI are located in one place.
And now an example without using page objects and then one using it.
Without:
describe('angularjs homepage', function() {
it('should greet the named user', function() {
browser.get('http://www.angularjs.org');
element(by.model('yourName')).sendKeys('Julie');
var greeting = element(by.binding('yourName'));
expect(greeting.getText()).toEqual('Hello Julie!');
});
});
With:
var AngularHomepage = function() {
var nameInput = element(by.model('yourName'));
var greeting = element(by.binding('yourName'));
this.get = function() {
browser.get('http://www.angularjs.org');
};
this.setName = function(name) {
nameInput.sendKeys(name);
};
this.getGreeting = function() {
return greeting.getText();
};
};
describe('angularjs homepage', function() {
it('should greet the named user', function() {
var angularHomepage = new AngularHomepage();
angularHomepage.get();
angularHomepage.setName('Julie');
expect(angularHomepage.getGreeting()).toEqual('Hello Julie!');
});
});
You can also define various test suites. Take a look at this config file:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'chrome'
},
// Spec patterns are relative to the location of the spec file. They may
// include glob patterns.
suites: {
homepage: 'tests/e2e/homepage/**/*Spec.js',
search: ['tests/e2e/contact_search/**/*Spec.js',
'tests/e2e/venue_search/**/*Spec.js']
},
jasmineNodeOpts: {
showColors: true, // Use colors in the command line report.
}
};
I'm using raphael.js in a backbone.js project. Importing raphael works like a charm (this version is AMD compliant). Everything is working as expected. "app" here is a predefined global object defined in another app.js file.
define(['jquery', 'underscore', 'app', 'backbone','raphael' ],
function($, _, app, Backbone, Raphael) {
var AppView = Backbone.View.extend({
initialize: function() {
app.paper = Raphael(0, 0, app.w, app.h);
}
...
}) })
Now my app.paper has all Raphael methods. Awesome!
I just discovered in the Raphael API that I can add my own predefined methods using Raphael.el and Raphael.fn
initialize: function() {
app.paper = Raphael(0, 0, app.w, app.h);
Raphael.el.myfill = function(){
this.attr('fill', '90-#fff-#000');
}
app.paper.circle(x,y,r).myfill(); //it works! (Brilliant!)
}
}
My question is, how can I put the Raphael.el.myfill definition along with other Raphael.fn.mydefinedmethods into another javascript file and bring it into the AppView above?
I don't want to clog up my AppView file with lengthy definitions, and I also would like to provide variability as to which Raphael.[el|fn] definitions I use in different views. But since these object constructors are already part of the Raphael.js object that I've already pulled in as a dependency, I'm not sure how to separate the Raphael.el and Raphael.fn definitions out using the require.js protocol. Before require.js I would have simply put such definitions in another myRaphaelDefs.js file, added another "script" tag to my html and they'd all be available always, but this is the 2015 and I've jumped on the modular js bandwagon.
I'm using RedRaphael branch which is AMD compliant, so I have no "define" wrapper on the Raphael.js itself. If this library did come with such a wrapper I might try adding the outsourced definitions directly into the Raphael.js as dependencies. (not an option) RedRaphael works with require.js right out of the box, so there's no "define" wrapper there.
What we do is add a wrapper around our libraries and route it with the map option in require.config, so the wrapper gets the original library, but everything else goes throw the wrapper:
raphael-wrapper.js:
define(['raphael'], function (Raphael) {
Raphael.el.myfill = function(){
this.attr('fill', '90-#fff-#000');
};
return Raphael;
});
require.config:
{
paths: {
'raphael': '/path/to/rahpael'
},
map: {
'*': {
'raphael': '/path/to/rahpael-wrapper'
},
'/path/to/rahpael-wrapper': {
'raphael': 'raphael'
}
}
}
I'm trying to set certain titles and strings in my app to a different language upon recognising the locale from a mobile phone.
I'm using a App.utils.Global class to set certain things like the code down here. This doesn't seem to work, my default name stays the same. When I print the config values after I change it it's actually loaded with the changed name. Is the view I'm outputting the name in painted before the globalization plugin is actually done changing things?
How can I prevent the rest of the app to execute things before setting the right global variables upon the device it's localeName? Or is there another way of doing this? I know there are probably better ways to do localisation in Sencha but because I only have a few strings this seemed the easiest solution.
Thanks in advance
Ext.define('App.utils.Global', {
singleton: true,
alias: 'widget.global',
config:
{
namelabel: 'default name',
},
constructor: function(config) {
this.initConfig(config);
that = this;
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.globalization.getLocaleName(
function (locale) {
if(locale.value == 'en_US'){
that.setNamelabel('ENGLISH NAME');
}
else if(locale.value == 'nl_NL'){
that.setNamelabel('DUTCH NAME');
}
},
function () {
alert('Error getting locale\n');
}
);
}
}
}
});
Rather than having the "deviceready" event handler inside a class constructor, you ought to have that in your app.js file.
Then, inside the "deviceready" event handler, run the Ext.Application() method to start the app construction.