How do I get the html content of a template? For example, I have the following template:
<template name="test">
<div id="example">
<strong>This is a test.</strong>
</div> <button id="btn">Get</button></template>
I need the event click of button the HTML contents of the div # example is captured. it possible?
You could use JQuery (already built into meteor) for this
var html = $('#example').html();
As of Meteor 1.x, you can use Blaze.toHTML(). It returns the HTML of the given Template as a String.
If you assign the click event using Template.test.events you should have all the data that template describess in your "this".
Related
I am using iron-router, i have a route "models" which has a list of items. When the user clicks one of these items a new route "model" is used, the name of the selected item is passed as a param and used to load data about that model from the database.
I want to use slick carousel, using an array of images returned from the database (based on the param).
<div id="carousel">
{{#each images}}
<div class="item">
<img src="/images/{{this}}" alt="">
</div>
{{/each}}
</div>
Where should I call the slick init?
Generally speaking, you should initialize plugins in a template's onRendered callback. In your case, that won't work because onRendered will fire before any of the images are inserted into the DOM. With other carousel plugins I've seen, the following strategy works:
Move each item to its own template (carouselItem).
Add an onRendered callback to carouselItem so that the plugin will be initialized after each item is added to the DOM.
I haven't tried this with slick carousel, but it would look something like this:
<template name="carousel">
<div id="carousel">
{{#each images}}
{{> carouselItem}}
{{/each}}
</div>
</template>
<template name="carouselItem">
<div class="item">
<img src="/images/{{this}}">
</div>
</template>
Template.carouselItem.onRendered(function() {
$('#carousel').slick();
});
Assuming slick carousel can be initialized multiple times, this approach should work. Be aware that one possible downside is that the plugin will refresh whenever images is updated. One way to fix that is to use the {reactive: false} option in your find.
Usually you would call a plugin on an element in Template.myTemplate.onRendered:
Template.xxx.onRendered(function() {
$('#carousel').slick();
});`
I want to render each article in my meteor Articles collection.
(File located in myProject/collections/collections.js so it should be available for both client and server)
Code in collections.js:
Articles = new Meteor.Collection('articles');
I've got the autopublish package installed and and i have inserted an object in the Article collection via the Chrome console and verified the insert via the console with: Articles.findOne()
Articles.insert({name: 'HTML5', description: 'HTML5 for beginners', src: 'https://www.youtube.com/watch?v=9gTw2EDkaDQ'})
What i have got so far is:
<head>
<title>Articles</title>
</head>
<body>
{{> main}}
</body>
My main template is the one that won't show the articles.
<template name="main">
<div class="container-fluid">
{{#each articles}}
{{> article}}
{{/each}}
</div>
</template>
And my article template which should be rendered for each of the objects in my Articles collection, looks like this:
<template name="article">
<div class="item well span4">
<iframe height="{{height}}" src="{{src}}"></iframe>
<hr>
<h4 class="muted">{{name}}</h4>
<p>{{description}}</p>
</div>
</template>
What do i need to add to render this article? And what would i have to do to render the article if i were remove the autopublish package?
What do i need to add to render this article?
You need to tell what your main template how to calculate the field articles. You simply do that by calling the helpers method on the template.
And what would i have to do to render the article if i were remove the
autopublish package?
You would need to create a publish, so the clients can get the documents in the collection by subscribing to it.
I have built a form in Grails. I have used the g:submitToRemote button which dynamically creates a Html <input> tag. I want to apply a dojo style to it like to all other elements in my form like this <g:submitToRemote dojoType="dijit.form.Button" /> but the style doen't get applied. Can you help me out to figure the problem?
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
There are several things you need to check:
Are you sure the button is being parsed? Look at the HTML source and validate whether or not the HTML code of the button is still the same as the code you provided. When Dojo parses the HTML code it will usually change the HTML code to something more complex. If you don't have that complex code, your widget is not picked up by Dojo.
Did you import the correct CSS file? You need to make sure you imported the correct CSS file, for example claro.css.
Does any of the parent elements have the theme class name? If you use the claro theme (for example), you need to make sure you have the classname claro somewhere, usually in your body-tag.
EDIT:
More things to check:
Do you have dijit/form/Button in your require()? Assuming you're using Dojo 1.6 (because you're using the old dojoType) the code you need is:
dojo.require("dijit.form.Button");
Is your button loaded asynchronous or not? If it is loaded async, your node will not be parsed when your page loads. This means you have to async it manually by wrapping your button in a <div> and manually parse that div, for example:
<div id="toParse">
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
</div>
And in JavaScript:
dojo.parser.parse("toParse");
I want to fill a script type="text/html tag with a Meteor template.
So, this is an odd thing to do, I know. Half the reason I want to do this is because Cloud9 can't tell the difference between JS script tags and HTML script tags, and its syntax highlighting and tag-completion breaks when you try to write HTML in script tags. The other half of me is just curious to see if this is possible, because an ugly-as-sin workaround exists.
So this:
<body>
<script type="text/html" id="test">
{{> test}}
</script>
</body>
<template name="test">
<span>Test</span>
</template>
Produces this:
<script type="text/html" id="test">
<!--label:YRgyaMH8-->
</script>
Anyone have a way to force it to render the template, instead of what looks like evaluate the name as a comment?
Submitting another answer b/c I'd like to keep my previous one just for the records. I think this approach will work better though.
Inside your html, you're going to define two sections. The first is where you're going to place your template code. It will go inside a comment inside a plain div tag. The second is where the template will be placed for Knockout to consume. It looks like this:
<template name="koTemplate">
<div id="myTemplate">
<span>Here is my template with children</span>
</div>
<script type="text/html" id="test"></script>
</template>
Then in your client JS code, you're going to add a callback to run when the template is rendered
Template.koTemplate.rendered = function () {
// Get the first node, then get the content inside of it
var templateHtml = this.firstNode.innerHTML;
// Remove the element so it doesn't get rendered
this.firstNode.parentNode.removeChild(this.firstNode);
// another option is to surround the contents inside the template w/comments, but that loses syntax highlighting
// Get the target node for placing the template in
var templateNode = this.lastNode;
// place the content from the original node to the target node
templateNode.innerHTML = templateHtml;
};
This will basically get the content of the template, remove the template, then place it inside the script tags. The result will look like:
<script type="text/html" id="test">
<span>Here is my template with children</span>
</script>
I would suggest moving away from using the script tag and instead use some other generic tag that Cloud9 won't treat as JS and Meteor won't fudge with. Using the example in my comment on the question, it would look something like this:
<div id="template">
<!--<span>test</span>-->
</div>
And in your JS you would parse that:
var template = document.getElementById('template').firstChild.nodeValue,
result = parseTemplate(template, values);
That's the basic idea. You'd have to convert it over to Knockout's template parsing after getting the result.
I am creating a macro with Excel VBA that will submit an entry into an online database using information from an Excel spreadsheet. During this entry process, the macro needs to click on a CSS button. It isn't a form button, does not have an input type, no name, no id, and no source image except for a background image. I think my only hopes are either to click on the button based on the div class. Can anyone help?
The button is here :
<div class="v-captiontext">
By Ankit
</div>
<td class="v-tabsheet-tabitemcell v-tabsheet-tabitemcell-selected" style="">
<div class="v- tabsheet-tabitem v-tabsheet-tabitem-selected">
<div class="v-caption" style="width: 39px;">
<div class="v-captiontext">
By LOT</div>
<div class="v-caption-clearelem">
</div>
</div>
</div>
</td>
Thanks to Remou's answer on this thread: Use VBA code to click on a button on webpage
Here is a first stab in your issue, you could try this:
Set tags = wb.Document.GetElementsByTagname("div")
For Each tagx In tags
If tagx.class = "v-caption-clearelem" Then
tagx.Click
End If
Next
Yet, I've never tried to use the Click method on a div.