simpler implementation for matcher option of select2 - jquery-select2

current:
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
$(".js-example-matcher-start").select2({
matcher: oldMatcher(matchStart)
})
});
could we make it simple by removing the oldMatch() and the require part:
$(".js-example-matcher-start").select2({
matcher: matchStart
})
(we move the call to oldMatch internally inside select2.js)
or could we separate the require part something like this:
$.fn.select2.amd.require(['select2/compat/matcher'], ...);
$(".js-example-matcher-start").select2({
matcher: oldMatcher(matchStart)
})
thanks

Related

How to use the createDummyGenerator() function?

I can't understand how to use the createDummyGenerator() function when testing a generator that relies on external generators.
I have tried:
test.js:
...
return helpers.run(require.resolve('../generators/app'))
.withGenerators([
[helpers.createDummyGenerator(), 'license:app'],
])
.then(() => {
assert.textEqual('true', 'true')
});
...
index.js:
...
default() {
this.composeWith('license:app', { name: 'foo' });
}
...
This makes the test fail because it can't find a generator for license:app. I have generator-license in my package.json as a dependency.
I also tried the following:
test.js:
...
beforeEach(() => {
jest.mock('generator-license/app', () => {
const helpers = require('yeoman-test');
return helpers.createDummyGenerator();
});
}
...
index.js:
...
default() {
this.composeWith(require.resolve('generator-license/app', { name: 'foo' }));
}
...
This doesn't mock the generator at all, and it uses the actual generator-license code, which makes the test fail because not all prompts are supplied (some are meant to be asked by the license generator)
How am I supposed to use the createDummyGenerator() helper to completely stub out the license generator?
Well, I feel like an idiot... I had a typo in another test that didn't mock the module, and that's what was making the test suite fail... Nevermind, nothing to see here :)

Why are my generator methods not inherited?

I'm trying to make a generator that I can then extend to form similar sub-generators
Here's my base generator:
var generators = require('yeoman-generator');
var VolumeAdderBase = module.exports = generators.Base.extend({
initializing: function() {
/* ... */
},
prompting: function () {
/* ... */
},
writing: function () {
/* ... */
}
});
Here's an example sub-generator:
var VolumeAdderBase = require('../../utils/VolumeAdderBase.js');
// console.log(VolumeAdderBase);
module.exports = VolumeAdderBase.extend({
fileType: "tomcat script",
containerName: "tomcat",
containerVolumeLocation: "/opt/tomcat/client-conf/"
});
When I try to run my sub-generator, it does nothing at all. No errors, no nothing.
When I dump the VolumeAdderBase object, there are plenty of methods on there, but they are all the Base ones. The ones defined in VolumeAdderBase are missing.
Am I missing something here? Or is there a better way to create similar sub-generators?
yeoman-generator is only going to run top level methods (Object.getOwnPropertyNames(prototype)). It doesn't go deeper in the prototype; that's by design. If Yeoman was to dig in the prototype, you couldn't use methods like this.destinationPath() or any other helpers as they'd all be schedule to be run - which would just break.
We have plans to support mixin in the future. But that's not currently the case.
As a fix, you can manually assign these methods:
VolumeAdderBase.prototype.prompting = VolumeAdderBase.prototype.prompting;
// etc...

How to use each function, this from jquery to Dart Language?

I have a function in jquery as below
function findMax(){
$( ".elements" ).each(function( ) {
if($(this).css('z-index')>max1)
max1=$(this).css('z-index');
max1=parseInt(max1);
});
}
I have to implement this function in Dart Language. Facing problems with syntaxes in using .each function and 'this' function.
The equivalent of jQuery :
$(".elements").each(function( ) {
// do something with this being one of elements with a 'elements' class
// you can access the current element with $(this)
});
is in Dart :
querySelectorAll('.elements').forEach((Element e) {
// do something with e being one of elements with a 'elements' class
// you can access the current element with e
});

How to reference the bundled js files (asp.net mvc4) in Require.js?

I have been studying John Papa's pluralsight course on SPA.
In his main.js, he gave a name to each js library which is included in the bundle.
(function () {
var root = this;
define3rdPartyModules();
function define3rdPartyModules() {
// These are already loaded via bundles.
// We define them and put them in the root object.
define('jquery', [], function () { return root.jQuery; });
define('ko', [], function () { return root.ko; });
define('amplify', [], function () { return root.amplify; });
define('infuser', [], function () { return root.infuser; });
define('moment', [], function () { return root.moment; });
define('sammy', [], function () { return root.Sammy; });
define('toastr', [], function () { return root.toastr; });
define('underscore', [], function () { return root._; });
}
})();
But what is the root here?
By doing so, we can call those short names in the define statement:
define('vm.session',
['ko', 'datacontext', 'config', 'router', 'messenger', 'sort'],
function (ko, datacontext, config, router, messenger, sort) {
Current, I don't know how to do that. So my working define statement is ugly:
define('vm.admin.outfitters',
['/Scripts/lib/jquery-1.8.1.js', '/Scripts/lib/jsrender.js', ...], function(){...
I know there's gotta be a better way. All those js files have been included in the script bundle already. How can I reference those scripts?
RE: root
RequireJS and the AMD ready libraries remove the objects from the global scope (things like ko). Some plugins want them in global scope, so we can either shim those plugins or pop the objects back in global scope. The latter is what is happening in this code. It's being done for the plugins for Knockout primarily.
RE: your define statements
The first parameter is the name of of the module, so you are fine there. THe second parameter is the list of modules that RequireJS is aware of. The 3rd parameter is the matching variable to represent it. So in your code you might have something like this ...
define('vm.admin.outfitters',
['jquery', 'jsrender'], function($, jsrender) {

JQuery UI Widget Inheritance / class method call

I'm trying to write a custom widget in JQuery UI (v 1.9 m8): http://pastebin.com/zua4HgjR
From my site I call it like this: var D = new $.ui.mail({}); Basically it works.
Is there a better method to call doSend on button click?
The question is how to access object instance from function handler?
"this" returns entire html window.
Tried with $.proxy doesn't work: click: $.proxy(this.doSend, this);
Thanks in advice!
Unfortunately if you setup the buttons by using the options member you'll have no reference to the element that you need in order to call doSend. One workaround I was able to come up with is to assign the handler in the _create method where you have the appropriate reference.
_create: function() {
this.options.buttons = [
{
text: 'Send',
click: function(self) {
return function() {
$(self.element).mail('doSend');
};
}(this)
},
{
text: 'Cancel',
click: function() { $(this).remove() }
}
];
this._super(arguments);
}
Live Example - http://jsfiddle.net/hhscm/2/
Spending this weekend finally I finished my plugin: http://agrimarket-blacksea.com/jsc/jquery-mail.js
I decided to call "class function" in classical way: $(this).mail('doSend'), until I'll find something better.
Thanks!

Resources