I just started supporting a huge Backbone and Marionette application. Currently using Underscore and the version is 1.7.0.
I would like to switch to Lodash latest version to take advantage of new features like the one I learned today from my other post, _.has()'s deep search. Also I'm using RequireJS
What is the safest way to switch to Lodash? Do I
1. bower install lodash
2. update require.confg
"underscore": "../components/underscore/underscore",
"underscore.string": "../components/underscore.string/lib/underscore.string",
and update the values to point to `lodash` paths but keep the property names?
Here is one example that may or may not work with Lodash. It's just an example.
convertModels: function convertModels() {
_.each(this.models, _.bind(function (model) {
model = this.convertItem(model);
}, this));
},
This post is also about "will I need to change some of the Underscore codes" or will Lodash be able to handle and produce the same output. Or I will just need to check the application and see what happens?
faced same task some time ago and did this via require config:
require.config({
paths: {
// ..
"lodash": "libs/lodash-3.9.3",
"backbone": "libs/backbone-1.2.0",
// ..
},
map: {
"*": {
// use lodash instead of underscore
"underscore": "lodash"
}
}
}
..details here: http://requirejs.org/docs/api.html#config-map
I use _ functions a lot and didn't have to change anything after the switch.
Related
I'm trying to query for all YAML files in a subfolder of my data folder. I'm using gatsby-transformer-yaml to parse the YAML data. My filetree looks something like this:
content/
posts/
book1.md
book2.md
src/
data/
books/
quotes1.yaml
quotes2.yaml
templates/
booknote.tsx
According to the documentation, I should be able to make a query called allBooksYaml which would return all of the quotes in quote1.yaml and quote2.yaml. However, when I look at the GraphiQL playground, the only queries I can make are allQuote1Yaml and allQuote2Yaml. (1) Is this a bug? Or is something wrong with my setup?
The reason why I want to do this is so that I can filter the result of allBooksYaml with the title of the book and display the correct quotes for each page generated with the booknote.tsx template. If I don't do this, I think I would have to make an individual page/GraphQL query manually for each book note post I want to create. (2) Is there a better way to link data in a YAML file and the Markdown/Page component?
Thanks in advance!
According to the plugin's documentation, given:
module.exports = {
plugins: [
`gatsby-transformer-yaml`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/data/`,
},
},
],
}
Where the source folder ${__dirname}/src/data/ contains the .yaml files.
Having in mind also, that you can structure your folder to generate an array or a single object:
Array of Objects: Where each file represents a collection. (you probably want this one)
Single Object: Where each subfolder represents a collection; each file represents one “record”.
So, if your path is ./src/data/books you should be able to query for all books, but this will generate a specific node for all books (single object).
For the second question, I think the best optimal solution is to generate dynamically the pages using gatsby-node.js, querying all markdown books and there, send the title (or another unique field) to the template via context and filter there for each specific book, so your quotes will need to contain a field with an identifier that will match the book, mostly what you said but without the manual approach. Which, at the same time, is more or less a blog approach.
Further reference: https://www.gatsbyjs.com/docs/creating-and-modifying-pages/
You should be able to do just that by using the following config:
"gatsby-transformer-yaml",
{
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/src/data`,
},
},
"gatsby-transformer-yaml",
{
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/content`,
},
},
I am trying to get my site setup with Gatsby + MDX. I am looking at the documentation here and want to make use of the autolink-header-option. I have tried using the rehype and remark plugins for this, but I can only get the Rehype plugin to work and only with the wrap option. I would much prefer the GitHub (default) style with the link coming before the title.
I am using the below config in gatsby-config.js and cleared .cache and public after updating the file to be sure nothing was cached. Also I am not getting any errors, everything builds and runs successfully, there just is not any link to the headers.
{
resolve: `gatsby-plugin-mdx`,
options: {
rehypePlugins: [
// To pass options, use a 2-element array with the
// configuration in an object in the second element
require("rehype-autolink-headings"),
],
},
},
UPDATE
After trying multiple configurations, the way I was able to get it working as expected was with a different plugin config.
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [ `gatsby-remark-autolink-headers` ],
plugins: [ `gatsby-remark-autolink-headers` ],
},
}
Both gatsbyRemarkPlugins and plugins are required as per: https://github.com/gatsbyjs/gatsby/issues/15486
The README for rehype-autolink-headings mentions that:
This package works with headings that have IDs. One way to add IDs to headings is by using remark-slug before this plugin.
Changing your config to the following should fix it:
{
resolve: `gatsby-plugin-mdx`,
options: {
rehypePlugins: [
require("rehype-slug"),
// To pass options, use a 2-element array with the
// configuration in an object in the second element
require("rehype-autolink-headings"),
],
},
},
In fact, the documentation you linked to has this additional require line as well, but it doesn't clarify what it is used for.
I'm trying to use array filters in mongodb 3.6.0-rc3, exactly like in doc example but not getting any rows affected and no error.
Example is simplified. I know this can be done with $ as positional operator but I'm planing to use this feature for two level nested arrays.
db.getCollection('books').update({},
{
$set: { "authors.$[element].firstName": "Joe" }
},
{
arrayFilters: [ { element: { "_id": ObjectId("some_id") } } ],
multi: true
})
Anyone tried this yet?
Are you typing this in robomongo? It looks like it! If so it won't work. Read my note on Updating a Nested Array with MongoDB where I say this does not work in an "older shell" or anything based on it ( which robomongo is a shell based build ) because of the way the shell helper methods are currently implemented:
NOTE Somewhat ironically, since this is specified in the "options" argument for .update() and like methods, the syntax is generally compatible with all recent release driver versions.
However this is not true of the mongo shell, since the way the method is implemented there ( "ironically for backward compatibility" ) the arrayFilters argument is not recognized and removed by an internal method that parses the options in order to deliver "backward compatibility" with prior MongoDB server versions and a "legacy" .update() API call syntax.
So if you want to use the command in the mongo shell or other "shell based" products ( notably Robo 3T ) you need a latest version from either the development branch or production release as of 3.6 or greater.
So if you want to "play with" the release candidate, either use the bundled mongo shell with that version or simply run your code through any standard driver.
db.getCollection('books').update({},
{
$set: { "authors.$[element].firstName": "Joe" }
},
{
arrayFilters: [ { "element._id": ObjectId("some_id") } ],
multi: true
})
this BUG,just upgrade studio-3t version to 2018.6.1,use $ and arrayFilter OK.I try it in mongo4.0.4 and studio-3t
I have been searching for a few days to figure out how to change the options for the swiper (v 7.x-1.4) module in Drupal-7. The documentation is clear-as-mud explaining how the module expects this hook to be used. I'm looking for a simple code example on how to implement the following options from the swiper API:
autoplay
prevButton
nextButton
autoplayDisableOnInteraction
The only documentation reference I have been able to find is from the README.txt in the module:
...
You can also add, change and remove, any of API options of the Swipers,
just you need to implement a hook:
hook_swiper_options_alter($node, $plugin_options) {}
This way the module will handle pass these options to the script that
instantiates the swiper Plugin.
...
I'm fairly new to Drupal, but I am trying to learn. I have attempted to create a simple custom module to implement these options. I have called my module myCustom, created the /drupal/sites/all/modules/myCustom directory with the following files:
myCustom.info:
name = myCustom
description = customize swiper
package = me
version = 0.02
core = 7.x
files[] = myCustom.module
myCustom.module:
<?php
function myCustom_swiper_options_alter($node, $plugin_options)
{
$plugin_options += (
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: true
);
return($node, $plugin_options);
}
I know I have multiple problems. Drupal refuses to enable my module as-is and I can not figure out why. I have checked the admin->reports->recent log messages report and found nothing relevant to at least help me troubleshoot.
Any ideas how I can fix this? Does anyone have a working example of code that I can copy and modify to get this hook working?
Thank you in advance for any assistance!
You may want to read through this documentation: Writing module .info files (Drupal 7.x).
Remove this line from your .info file: files[] = myCustom.module. Drupal will automatically read through the .module file.
As you defined a version in your .info file this may need your attention: Release naming conventions, but actually you can just leave that out as well, it's not mandatory.
Since you're using a hook from that swiper module, I recommend to set it as a dependency in your custom module's .info file as: dependencies[] = swiper to prevent unmet dependency errors.
Change the $plugin_options array to a php array & do not return anything:
<?php
function YOUR_MODULE_swiper_options_alter($node, &$plugin_options) {
$plugin_options += array(
'nextButton' => '.swiper-button-next',
'prevButton' => '.swiper-button-prev',
'paginationClickable' => true,
'autoplay' => 2500,
'autoplayDisableOnInteraction' => true,
);
}
Additionally: Try to refrain from using capitals in module names as per machine name (module dir name). If you take a look at other Drupal modules in /modules or sites/all/modules they're all lowercased. (You can leave the name in your .info file which also represents your module in the modules list as you have now.)
I recently started learning AngularJS+Firebase. I'm trying to write in my firebase an object like this:
{
title: "Personal Information",
say: [
[{ "eng": "What's", "ukr": "Що є" }, { "eng": "your", "ukr": "твоє" }, { "eng": "surname?", "ukr": "прізвище?" }],
[{ "eng": "Smith", "ukr": "Сміт" }],
[{ "eng": "What's", "ukr": "Що є" }, { "eng": "your", "ukr": "твоє" }, { "eng": "first", "ukr": "перше" }, { "eng": "name?", "ukr": "ім'я?(не фамілія)" }]
]
}
with line:
lessondata.add($scope.topic);
where 'lessondata' is service created with angularFireCollection() and $scope.topic - object bound to my UI.
But got the following error:
Firebase.push failed: first argument contains an invalid key ($$hashKey) in property 'say.0.0'. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]"
As I understood Firebase do not allow to use 0 as a key even if it's a key in an attached array for which zero key is natural. So should I change my object structure in some hardcoded instance or I miss something? Thanks in advance!
EDIT: As Anant points out in the comments, in the latest stable version of Angular (1.0.7 atm), you can use angular.copy(obj) to remove $$hashkey attributes.
Like Michael said, the '$' in '$$hashKey' is the issue. Angular creates the $$hashKey properties behind the scenes (see more here: https://groups.google.com/forum/#!topic/angular/pI0IgNHKjxw). I've gotten around this issue by doing something like myRef.push(angular.fromJson(angular.toJson(myAngularObject))).
The issue is the $ in "$$hashKey", not the 0. 0 is allowed.
I wanted to throw another answer in here that is much simpler, just use track by in your repeat. It will get rid of the $$hashKey attribute that is causing so much grief.
<div ng-repeat="item in items track by $index">{{item.name}}</div>
I'm a bit late to this but I thought I would like to add my two cents as I was shaking my head to all the other answers. Hopefully this can help you to avoid this issue all together.
Use the angularFire library intended to handle angular data and use it's methods.
while yes you can use the pure javascript library methods to .push() .add() .update(), .set() ect.
So if you want to avoid any clashes when firebase communicates with angular javascript you need to be using the appropriate .$foo() methods (i.e. .$save()). In your case just add the $ to your .add() (make it .$add())
so use lessondata.$add($scope.topic);
differences when saving with firebase's vs angularfire's
AngularFire's $save() method is implemented using Firebase's set() method.
Firebase's push() operation corresponds to AngularFire's $add() method
Typically you should be using set()/$save() if you either have an object that already exists in the database or if you are working with objects that have a natural key.
more info on that here: https://stackoverflow.com/a/35959496/4642530
Things to note with AngularFire
For a callback:
and if you want a callback to know if your data saved correctly you can do something like this:
var list = $firebaseArray(ref);
list.$add({ foo: "bar" }).then(function(ref) {
var id = ref.key();
console.log("added record with id " + id);
list.$indexFor(id); // returns location in the array
});
I was surprised this wasn't mentioned earlier in any of the other answers, but take a look at these docs https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray-addnewdata
Cheers.
The best way to get rid of the $$hasKeys is to use "track by" in ng-repeats as in the following (as mentioned in the answer above)
<div ng-repeat="(key, value) in myObj track by $index"> ... </div>
but you can also set track as par of ng-model-options
ng-model-options="{ trackBy: '$value.someKeyOnYourObject' }"
on a form control. This way also improves performance of your angular app.
Another way is to remove the $$hashKey is using
angular.copy(someObj);
If all else fails, you could also use lodash to remove the keys that start with the "$".
_.omitBy(yourObject, function(value, key){return _.startsWith(key, '$');});
You can also strip out the property before pushing it.
delete $scope.topic.$$hashKey