I want to read image from folder. Image's path is mentioned in variable. And display.
I was just looking for a solution, which was why I stumbled upon your question. Good news is, I fixed it!
Here's what I did:
let cityPic = "/images/city_" + this.props.city.name + ".png";
cityPic = cityPic.toLowerCase();
return (
<div className="text-center"><img src={cityPic}></img></div>
)
I'm using React but I'm assuming it would work similarly.
Related
New to coding, trying to see what/if Tags would make this code work
So I'm a beginner with basic understanding and more of a Graphics/ Designer than code based. I found a codepen by WEDOO that has exactly what I need and want to try to just swap my "animationData" to see if I can get it to work and then modify it as needed for my test (will be assign the button code to various objects for the SVG). I Can't seem to find the right "Tags" or determine if its referencing an external script...I'd image it just needs the right information to function...is that correct?
Thanks in advance!
var animation = bodymovin.loadAnimation({
container: targetAnim,
path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/914929/data-testo4.json...
My output from BodyMovin in a JSON file:
var animationData =
{"v":"5.4.2","fr":29.9700012207031,"ip":0,"op":149.000006068894...
Does it make sense to think that I need replace the var animation with info that should be the targetAnim with the code in the JSON file? So far put the var animationData breaks things and does nothing (visually).
The bodymovin.loadAnimation can be passed either a URL to a Bodymovin JSON via the path option OR you can pass the animation JSON inline by setting the animationData option instead.
In you case it would end up looking something like:
var animation = bodymovin.loadAnimation({
container: targetAnim,
animationData = {"v":"5.4.2","fr":29.9700012207031,"ip":0,"op":149.000006068894...
...
})
The following code works to load a local, static JSON file:
var stories = require('../stories/stories.json');
Now I want to load a file based on a variable, e.g. do something like this:
var storiesPath = '../stories/stories.json';
var stories = require(storiesPath);
But this triggers an error:
Error: Cannot find module '../stories/stories.json'
at require (packages/modules-runtime.js:123:19)
at meteorInstall.server.main.js (server/main.js:7:15)
Is there any way to get this working? I assume that I could load my file via the Meteor http package instead but I'd rather not add another package if I can avoid it.
Thanks for your hints
Like I said in the comment, you can easily use a variable in a require, e.g.,
> var x = 'fs';
> require(x).readFile
[Function]
So that's not the problem you are dealing with. Are you sure your first case indeed works? It would be surprising. I think you might be running into project file layout issues, due to the use of a relative path. I would stay away from that. And fortunately you can quite easily by using an asset! You can put your json file in private/ in your project folder and then use:
const stories = JSON.parse(Assets.getText('stories.json'));
I want to give my users the possibility to create document templates (contracts, emails, etc.)
The best option I figured out would be to store these document templates in mongo (maybe I'm wrong...)
I've been searching for a couple of hours now but I can't figure out how to render these document template with their data context.
Example:
Template stored in Mongo: "Dear {{firstname}}"
data context: {firstname: "Tom"}
On Tom's website, He should read: "Dear Tom"
How can I do this?
EDIT
After some researches, I discovered a package called spacebars-compiler that brings the option to compile to the client:
meteor add spacebars-compiler
I then tried something like this:
Template.doctypesList.rendered = ->
content = "<div>" + this.data.content + "</div>"
template = Spacebars.compile content
rendered = UI.dynamic(template,{name:"nicolas"})
UI.insert(rendered, $(this).closest(".widget-body"))
but it doesn't work.
the template gets compiled but then, I don't know how to interpret it with its data context and to send it back to the web page.
EDIT 2
I'm getting closer thanks to Tom.
This is what I did:
Template.doctypesList.rendered = ->
content = this.data.content
console.log content
templateName = "template_#{this.data._id}"
Template.__define__(templateName, () -> content)
rendered = UI.renderWithData(eval("Template.#{templateName}"),{name:"nicolas"})
UI.insert(rendered, $("#content_" + this.data._id).get(0))
This works excepted the fact that the name is not injected into the template. UI.renderWithData renders the template but without the data context...
The thing your are missing is the call to (undocumented!) Template.__define__ which requires the template name (pick something unique and clever) as the first argument and the render function which you get from your space bars compiler. When it is done you can use {{> UI.dynamic}} as #Slava suggested.
There is also another way to do it, by using UI.Component API, but I guess it's pretty unstable at the moment, so maybe I will skip this, at least for now.
Use UI.dynamic: https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/
It is fairly new and didn't make its way to docs for some reason.
There are few ways to achieve what you want, but I would do it like this:
You're probably already using underscore.js, if not Meteor has core package for it.
You could use underscore templates (http://underscorejs.org/#template) like this:
var templateString = 'Dear <%= firstname %>'
and later compile it using
_.template(templateString, {firstname: "Tom"})
to get Dear Tom.
Of course you can store templateString in MongoDB in the meantime.
You can set delimiters to whatever you want, <%= %> is just the default.
Compiled template is essentially htmljs notation Meteor uses (or so I suppose) and it uses Template.template_name.lookup to render correct data. Check in console if Template.template_name.lookup("data_helper")() returns the correct data.
I recently had to solve this exact (or similar) problem of compiling templates client side. You need to make sure the order of things is like this:
Compiled template is present on client
Template data is present (verify with Template.template_name.lookup("data_name")() )
Render the template on page now
To compile the template, as #apendua have suggested, use (this is how I use it and it works for me)
Template.__define__(name, eval(Spacebars.compile(
newHtml, {
isTemplate: true,
sourceName: 'Template "' + name + '"'
}
)));
After this you need to make sure the data you want to render in template is available before you actually render the template on page. This is what I use for rendering template on page:
UI.DomRange.insert(UI.render(Template.template_name).dom, document.body);
Although my use case for rendering templates client side is somewhat different (my task was to live update the changed template overriding meteor's hot code push), but this worked best among different methods of rendering the template.
You can check my very early stage package which does this here: https://github.com/channikhabra/meteor-live-update/blob/master/js/live-update.js
I am fairly new to real-world programming so my code might be ugly, but may be it'll give you some pointers to solve your problem. (If you find me doing something stupid in there, or see something which is better done some other way, please feel free to drop a comment. That's the only way I get feedback for improvement as I am new and essentially code alone sitting in my dark corner).
I have started to use Stackmob as a backend for a simple app I am building.
In stackmob I have set a relationship between two schema's and want to use '.fetchExpanded' to grab all of the data from stackmob, see this fiddle (will need to view the console to see the output):
http://jsfiddle.net/mcneela86/65Rax/
.fetchExtended(1);
The same code works using the '.fetch' instead of '.fetchExpanded'.
Has anyone come across this before?
Would really appreciate any help.
Ok, I found a work around for this.
Instead of using '.fetchExtended(1);' I will just use '.fetch();' and when I am defining the model I will change the following:
var Bike = StackMob.Model.extend({
schemaName: "bikes"
});
to:
var Bike = StackMob.Model.extend({
schemaName: "bikes?_expand=1"
});
This seems to remove the need for '.fetchExtended(1);'
Hope this helps someone else.
I have a Drupal filter module whose output I would like to alter, depending on where the output is going to be displayed. Specifically, I want to the filter to give the full output for nodes, but trim the content down for blocks.
I don't think this would be possible. It's hard enough to figure out what context something is being displayed in. It's doable but quite hard to code on your own. However the way the filter system works I don't think its possible within a filter to determine then context of the text being filtered. It's simply not made for something like that.
I'm the OP (but just registered an account).
I did manage to find a solution/workaround. Here's what I did:
Create block.tpl.php in my module which is a copy from system/block.tpl.php, with a constant added at the top.
Put my template file at the head of the theme registry using hook_theme_registry_alter():
function hook_theme_registry_alter(&$theme_registry) {
// using our own block.tpl.php file.
$theme_registry['block']['template'] = 'block';
$theme_registry['block']['path'] = drupal_get_path('module', 'module_name');
$theme_registry['block']['type'] = 'module';
$theme_registry['block']['theme path'] = drupal_get_path('module', 'module_name');
$theme_registry['block']['theme paths'] = Array();
}
Checked for the constant while constructing the filter output, changing as necessary.
Celebrated the outcome.