I have a template (tmpl1) which refers to a collection projectdetails, in the following code I can successfully show {{detailname}} what is based on the collectiondata projectdetails.detailname
But now I need to show also the Projectname which is in projects.name I do have the project._id saved in projectdetails.projectId
How can I now define a handelbar like {{projectName}} to display the project name.
I have tried to define this in projectdetails.js as helper but I was not successful. Can someone please add a code sniplet which explains how to define the handelbar and how to retrieve the data?
<template name="tmpl1">
<div id="example" class="panel">
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Start</li>
<li><i class="fa fa-cubes"></i> Projekte</li>
<li><i class="fa fa-cogs"></i> Details</li>
<li class="active">{{detailname}} {{projectName}}</li>
</ol>
</div>
You can just add a helper for projectName which joins the two collections.
The context of your template appears to be a "project detail" document, so inside of the projectName helper, this.projectId should be the id of the project document. Assuming the collection is called Projects and each project has a name field, the code should look something like this:
Template.tmpl1.helpers({
projectName: function() {
var project = Projects.findOne(this.projectId);
return project && project.name;
}
});
Related
This is my component:
{{#link-to routeName class="list-group-item"}}
<i class="fa {{icon}} fa-fw"></i> {{text}}
{{/link-to}}
Which I use:
<div class="list-group">
{{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>
The expected html is:
<div class="list-group">
<a class="list-group-item" href="xxx">
<i class="fa fa-user fa-fw"></i> Personal details
</a>
...
</div>
But because ember wraps the components in a div, the bootstrap rules do not apply anymore and the list-group has a wrong style.
If I change the component tag to a, and remove link-to from the component template, I loose the flexibility of link-to - and I do not know how to set attributes (href, class) in the containing tag.
It seems I can not use an Ember component for this then? Or is there a way to tellink ember no to wrap my component in a div, or anything else really: in order for the CSS to work, the markup structure must not be modified.
I've not tried this myself but apparently you can create custom link-to components by extending Ember.LinkComponent. Something like this might work...
// app/components/icon-link.js
export default Ember.LinkComponent.extend({
classNames: ["list-group-item"],
icon: null,
text: null,
})
...
// app/templates/components/icon-link.hbs
<i class="fa {{icon}} fa-fw"></i> {{text}}
...
// wherever
{{icon-link 'my-account' icon="fa-user" text="Personal details"}}
Here's a related blog post which may help you also - http://til.hashrocket.com/posts/faef1058c3-inheriting-from-linkcomponent-in-ember-is-amazing
As per this site
https://github.com/TAPevents/tap-i18n/blob/master/README.md#quickstart
i have started with demo using tap-i18n package and it works fine.
Now
I want Convert application language when selecting language from drop-down list.
For that i have created one meteor application.
in that i have putted on drop-down list filled with different languages.
Now ,
when i select any language from drop-down list it should change whole application language using tap-i18n package.
it is possible?
Thanks,
take a look to this example http://blog.digital-hosting.info/meteor-internationalisation/
header.html
<div class="dropdown">
<button class="btn btn-info" data-toggle="dropdown">Languages</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Francais</li>
<li>English</li>
<li>中文</li>
</ul>
</div>
header.coffee
Template.header.events = "click a.lang": (e) ->
lang = 'undefined'
$this = $(e.target)
lang = $this.data("lang")
TAPi18n.setLanguage lang
return
Ok, so I found this post: Meteor breadcrumb
But lets say I have the following:
<template name="somePage">
<h1>Page Title</h1>
{{> breadcrumb}}
</template>
<template name="breadcrumb">
<ul class="breadcrumb">
<li>
Home
</li>
{{#each path}}
<li>
{{this}}
</li>
</ul>
</template>
Helper:
Template.breadcrumb.helpers({
path: function() {
return Router.current().path.split( "/" );
}
});
Ok so the linked question at the top got me the basics. I'm trying to understand how to do a few more things here that should be obvious. I want the first to be for the home page, and the result returned from the path: function() includes an empty "", "page", "page", etc. in the beginning of it.
I'd like to be able to incorporate the proper paths. To be clear, I'd love to pull this off:
<template name="breadcrumb">
<ul class="breadcrumb">
<li>
Home
</li>
~ pseudo logic
{{#each path that isn't current page}}
<li>
{{this}}
</li>
{{/each}}
<li>
{{ currentPage }}
</li>
</ul>
</template>
Has anyone done this or found a reference that I haven't stumbled across yet?
I'll give you my own recipe for breadcrumbs using iron:router.
It works by supplying additional options to your routes in order to establish a hierarchy between them, with parent-children relations. Then we define a helper on the Router to give us a list of parent routes (up to home) for the current route. When you have this list of route names you can iterate over them to create your breadcrumbs.
First, we need to define our breadcrumbs template which is actually very similar to your pseudo-code. I'm using bootstrap and font-awesome, as well as some newly introduced iron:router#1.0.0-pre features.
<template name="breadcrumbs">
<ol class="breadcrumb">
<li>
{{#linkTo route="home"}}
<i class="fa fa-lg fa-fw fa-home"></i>
{{/linkTo}}
</li>
{{#each intermediateRoutes}}
<li>
{{#linkTo route=name}}
<strong>{{label}}</strong>
{{/linkTo}}
</li>
{{/each}}
<li class="active">
<strong>{{currentRouteLabel}}</strong>
</li>
</ol>
</template>
The {{#linkTo}} block helper is new in iron:router#1.0.0-pre, it simply outputs an anchor tag with an href attribute which value is {{pathFor "route"}}.
Let's define the helpers from our breadcrumbs template:
Template.breadcrumbs.helpers({
intermediateRoutes: function() {
if (!Router.current()) {
return;
}
// get rid of both the first item, which is always assumed to be "home",
// and the last item which we won't display as a link
var routes = Router.parentRoutes().slice(1, -1);
return _.map(routes, function(route) {
// extract name and label properties from the route
return {
name: route.getName(),
label: route.options.label
};
});
},
currentRouteLabel: function() {
// return the label property from the current route options
return Router.current() && Router.current().route.options.label;
}
});
Notice that we rely on the existence of a special option named 'label' which represents what we're going to put in our anchors, we could also have used the name for testing purpose.
The parentRoutes method is something we need to extend the Router with:
_.extend(Router, {
parentRoutes: function() {
if (!this.current()) {
return;
}
var routes = [];
for (var route = this.current().route; !_.isUndefined(route); route = this.routes[route.options.parent]) {
routes.push(route);
}
return routes.reverse();
}
});
Again, this function assumes that every route (except "home") has a parent property which contains the name of its parent route, we then iterate to traverse the route hierarchy (think of a tree, like a file system structure) from the current route up to the root route, collecting each intermediate route in an array, along with the current route.
Finally, don't forget to declare your routes with our two additional properties that our code relies on, along with a name which is now mandatory as routes are indexed by name in the Router.routes property:
Router.route("/", {
name: "home"
});
Router.route("/nested1", {
name: "nested1",
parent: "home"
});
Router.route("/nested1/nested2", {
name: "nested2",
parent: "nested1"
});
// etc...
This example is pretty basic and certainly doesn't cover every use case, but should give you a solid start in terms of design logic toward implementing your own breadcrumbs.
Inspired by #saimeunt I created a meteor breadcrumb plugin which can be found here: https://atmospherejs.com/monbro/iron-router-breadcrumb. You also specify a parent route and a title for the route itself.
I used saimeunt answer but had to make small changes to the template and the template helpers because I have parameters in some of my route paths. Here are my changes.
Template changes: add data=getParameter to #linkTo for intermediate routes
<template name="breadcrumbs">
<ol class="breadcrumb">
<li>
{{#linkTo route="dashboard"}}
<i class="fa fa-lg fa-fw fa-home"></i>
{{/linkTo}}
</li>
{{#each intermediateRoutes}}
<li>
{{#linkTo route=name data=getParameters}}
<strong>{{label}}</strong>
{{/linkTo}}
</li>
{{/each}}
<li class='active'>
<strong>{{currentRouteLabel}}</strong>
</li>
</ol>
</template>
Template helper changes: add helper function getParameters to get parameters from current route.
Template.breadcrumbs.helpers({
intermediateRoutes: function () {
if (!Router.current()) {
return;
}
var parentRoutes = Router.parentRoutes();
var routes = parentRoutes.slice(1, -1);
var intermediateRoutes = _.map(routes, function (route) {
return {
name: route.getName(),
label: route.options.label
};
});
return intermediateRoutes;
},
currentRouteLabel: function () {
var currentRouteLabel = Router.current() && Router.current().route.options.label;
return currentRouteLabel;
},
getParameters: function(){
var currentRoute = Router.current();
var parameters = currentRoute.params;
return parameters;
}
});
I have a custom Dexterity type that utilizes plone.formwidget.multifile.MultiFileFieldWidget:
class ITestimony(form.Schema):
...
form.widget(files=MultiFileFieldWidget)
files = schema.List(
title=_(u"Files"),
value_type=NamedFile()
)
Everything goes well as expected when editing the item:
Here is the relevant view template, that I try borrow from https://developer.plone.org/reference_manuals/external/plone.app.dexterity/advanced/files-and-images.html:
<fieldset tal:condition="context/files">
<legend>Attached Files</legend>
<ul>
<tal:files repeat="item context/files">
<li><a href=""
tal:attributes="href string:${context/absolute_url}/##download/files/${item/filename};"
tal:content="item/filename">Attached File</a></li>
</tal:files>
</ul>
</fieldset>
I want the attached files can be downloaded by clicking on the links. But I get error with my current template:
AttributeError: 'list' object has no attribute 'getSize'
How can I download my uploaded files?
Actually the answer is from http://josh.postach.io/multiple-file-upload-custom-dexterity-content-types-plone-5-02a
The following snippet works for me:
<fieldset tal:condition="context/files">
<legend>Attached Files</legend>
<ul>
<tal:files repeat="item context/files">
<li><a href=""
tal:attributes="href string:${context/absolute_url}/##edit/++widget++form.widgets.files/##download/${repeat/item/index}"
tal:content="item/filename">Attached File</a></li>
</tal:files>
</ul>
</fieldset>
Although using ##edit is wired here, hopefully we will have better version of plone.formwidget.multifile or related packages soon.
Some notes about how files are handled with Dexterity are here:
http://developer.plone.org/forms/files.html
Specifically, constructing download URLs:
http://developer.plone.org/forms/files.html#connstring-download-urls
(##download helper view)
Ok I saw many posts on how to serialize the value of dragged items to get hash and they tell how to save them. Now the question is how do I persist the dragged items the next time when user log's in using the has value that I got
eg:
<ul class="list">
<li id="id_1">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_2">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_3">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_4">
<div class="item ui-corner-all ui-widget">
</div>
</li>
</ul>
which on serialize will give
"id[]=1&id[]=2&id[]=3&id[]=4"
Now think that I saved it to Sql server database in a single field called SortOrder.
Now how do I get the items to these order again ?
the code to make these sort is below, without which people didn't know which library I had used to sort and serialize
<script type="text/javascript">
$(document).ready(function() {
$(".list li").css("cursor", "move");
$(".list").sortable();
});
</script>
There are a few options. One option is to do the sorting server-side. You would read out that string in .NET to generate the list, in order, on the fly. Then output it to the browser.
Another option would be output the serialized string as a string variable in javascript. You could then use jQuery to reorder the elements. The problem with this method is that there would probably be a flash where the unordered list would display and then the correctly ordered list would appear.