QQ on MongoDB and Meteor templates. I'm trying to set up a helper that will display each photo from a given DB and I'm having trouble pulling the image.
Right now a document from my DB looks like:
{ "order" : 19,
"img" : "http://foo.cdninstagram.com/photo.jpg",
"time" : "99999999999",
"user" : { "username" : "ME!",
"website" : "",
"profile_picture" : "http://foo.instagram.com/foophoto.jpg",
"full_name" : "Monique Rana",
"bio" : "",
"id" : "1234567" },
"_id" : "abc123" }
Below is the code that I'm working with.
<template name="currentTag">
<div class="container">
<ul class="grid effect-8" id="grid">
{{#each Tag}}
<li><img src="{{Tags.img}}"></li>
{{/each}}
</ul>
</div>
</template>
and the helper I'm building:
Template.currentTag.helpers({
Tag: function () {
return Tags.find().fetch();
}
});
Thanks!
You can use {{img}} instead of {{Tags.img}} to fix the issue. The data context in the {{#each Tag}} block is of the item itself.
Also you don't need .fetch since the template understands cursors, which are slightly more efficient i.e return Tags.find();
Related
I am trying to use the last version of vuejs with Laravel 5.3 ! The idea I am trying to fulfill is make a component foreach user. So that I have all users listed and foreach one there is a button "edit" , when I click this button I should see the form to update this user.
So this is how I defined the component :
<script>
new Vue({
el: '.view-wrap',
components: {
user-view: {
template: '#user-view',
props: ['user']
}
},
data: {
users: <?php echo json_encode($users); ?>,
},
methods: {
showForm: function(number){
$('div.update-user-'+number).css({'display':'block'});
},
getClassName: function (index) {
return "update-user-"+index;
},
getUpdateUrl: function(id){
return '/users/update/'+id;
},
}
});
This is the template for the "user-view" which take a class name "updateClass" which contains the id of every user (for show/hide purposes), an "updateUrl" which is the url to update the user to bind it with each form action and finally the object user :
<template id="user-view">
<div>
<div class="updateclass">
<form class="form-horizontal" method="PUT" action="updateUrl">
{{ csrf_field() }}
<ul>
<li>
<label for="name"> Name </label>
<input type="text" name="name" :value="user.name">
</li>
<li>
{!! Form::submit('Save', ['class' => 'button-green smaller right']) !!}
</li>
</ul>
{!! Form::close() !!}
</div>
and This is finally how I call the template :
<user-view v-for="user in users" :updateclass="getClassName(user.id)" :user="user" :updateUrl="getUpdateUrl(user.id)"></user-view>
The issue then : it seems that for example [class="updateclass"] doesn't change the value of updateclass with the result of getClassName(user.id) as defined in template call that is binded to. When I try it with [:class="updateclass"] in the template I get : Property or method "updateclass" is not defined on the instance ...
and the same thing applies to all other binded attributes.
The syntax you are using to assign a class dynamically is wrong. from the getClassName method you have to return a object having className like this : {"className: true} , like following
getClassName: function (index) {
var tmp = {}
var className = 'update-user-'+index
tmp[className] = true
return tmp
}
Than you can assign it like following as is in documentation:
<div :class="updateclass"></div>
I have the following json object -
{
"type": "typeOne",
"Children": [
{
"ChildType": "ChildTypeOne",
"Settings": {
"IsChildTypeOne": true
}
},
{
"ChildType": "ChildTypeTwo",
"Settings": {
"IsChildTypeTwo": true
}
}
]
}
My handlebars template contains the following snippet -
{{#each Children}}
{{#if Settings.IsChildTypeOne}}
ChildTypeOne!!
{{else}}
ChildTypeTwo!!
{{/if}}
{{/each}}
If I run this data through the template, the only thing that ever renders is ChildTypeTwo!!. So it seems that the if statement isn't properly evaluating IsChildTypeOne. The strange part is that if I put a statement in to display the value of IsChildTypeOne in the else clause, the value is displayed as true for the first ChildType.
Does anyone have any thoughts as to why this is not working as expected?
NOTE - the json posted above is a trimmed down version of my actual object. The real object has nested Children arrays that reuse the same object structure. So for instance, in my example, ChildTypeOne can also have a Childrens array with other objects within it.
EDIT****
So in stepping through the code, I found that if I had my type defined as follows -
...
"Settings" : {
"IsChildTypeOne": 'true'
}
...
it appears to work. Removing the single quoted causes the value to be read as undefined when stepping through.
Given charrs answer didn't seem to help, and the fact that your JSON is more complex than what you've posted, maybe your actual template isn't referencing a parent context correctly? For instance, if you wanted to access the type field in #each children block, it would look like this:
{{#each Children}}
{{#if Settings.IsChildTypeOne}}
{{../type}}
{{/if}}
{{/each}}
This ended up being related to the process being used to serialize the json string into an object. Please see the issue here for an explanation.
Can you try changing the handlebar template code as below:
{{#Children}}
{{#if Settings.IsChildTypeOne}}
ChildTypeOne!!!
{{else}}
ChildTypeTwo!!!
{{/if}}
{{/Children}}
This would iterate your array of Children and would give you result as
ChildTypeOne!!!
ChildTypeTwo!!!
Since your json has two elements one which has ChildTypeOne true and other not.
Sample handelbar:
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
{{#Children}}
{{#if Settings.IsChildTypeOne}}
ChildTypeOne!!!
{{else}}
ChildTypeTwo!!!
{{/if}}
{{/Children}}
</div>
</div>
The html Output for above template :
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
ChildTypeOne!!!
ChildTypeTwo!!!
</div>
</div>
You can see ChildTypeOne!!! for first element is coming.
I have users table whose structure is as below for a single document
{
"profile" : {
"name" : "new user",
"gender" : ""
},
"followers" : [
{
"id" : "yQLrjsbAnKHW7Zoef",
"name" : "vid vid"
},
{
"id" : "bGLrjsbAnKHW7Zoef",
"name" : "sid sid"
}
]
}
and my helper function is
Template.followers.helpers({
followers: function () {
return Meteor.users.find({_id: Meteor.userId()},{_id:0,followers:1, profile:1});
}
});
now I want to display data of just followers as :
name: Vid
name: Sid
Basically I want to access the elements in followers array in my template.
Currently it's
{{#each followers}}
{{ profile.name}}
{{ followers}}
{{/each}}
This is your template code
{{#each followers}} {{ profile.name}} {{ followers}} {{/each}}
Correct template code
{{#each followers}}
{{profile.name}}
{{#each this.followers}}
{{name}}
{{/each}}
{{/each}}
This will give you the name of the profile holder and the followers for that profile.
Fixed it.
The problem is that Meteor.users.find() returns only limited fields. Firstly I tried using field specifiers in the method where users is published but that didn't work. So following is what I did:
In server side, declared new variable as:
UserProfiles : = Meteor.users;
Added new publish method where i specified fields I required as:
enter code here
Meteor.publish('UserProfiles', function () {
return UserProfiles.find({},{
fields : {
'followers' : 1,
'profile' : 1,
'createdAt' : 1
}
});
});
Added following line in client side:
UserProfiles : = Meteor.users;
Meteor.subscribe("UserProfiles");
Then in my files I fired a query and returned as:
users: function (){
return UserProfiles.find(selector, {
fields : {
'followers' : 1,
'profile' : 1,
'createdAt' : 1
}
});
}
Inside template code:
{{#each users}}
Follower of {{profile.name}}
{{#each followers}}
{{> follower}}
{{/each}}
{{/each}}
I try Meteor and have object in Mongo like this:
{ _id: iureuyhfiwuyerbe, "title": "title", "channel": "http://...", "desc": "description", "items" : [{ "title" : "This is title", "description" : "This is description", "link" : "http://123435", "pubDate" : "16 Oct 2014 20:46:00 +0400" }, { }, { } ... ] }
This news from RSS sources. I have many same documents in Db with it's own id.
I planned use <select> to switch RSS channel and display news items for selected channel. I need to bind this two values. How? I don't understand how I can display on client side items array values for each object in this array? Title, description etc.
This piece of my HTML
<template name="newsList">
<div class="container-fluid">
{{> channel}}
</div>
<div class="container-fluid">
{{#each items}}
{{> item}}
{{/each}}
</div>
</template>
I see channel, but not see Items.
How I can debug code in client side to view variables in template? I use Webstorm 9. Debugger is not stop on breakpoints in template.
Thank you.
Make template of item..
same strategy of showing channels to channel.
{{> items}}
{{item.title}}, {{item.description}} // and more..
I am trying to get reactive-tables to work but I am having no luck following the instructions on GitHub.
This is what I have:
In my Main.html:
{{> courseTable }}
in my course_table.html:
<template name="courseTable">
<div id="table">
{{ > reactiveTable collection=Courses}}
</div>
</template>
in courses.js:(works with autoForm)
Courses = new Meteor.Collection("courses", {
schema: {....
Is there something I am missing? From my understanding once these commands are used, the rest is done from within the package. I can't find any more information on this package anywhere.
What I have now just shows a blank screen.
Thanks in advance!
This is what I have: (I'm using Meteor framework and bootstrap-3 package)
in index.html
<template name="clientes">
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Clientes</h3>
</div>
<div class="panel-body">
{{> reactiveTable collection=tables settings=tableSettings}}
</div>
</div>
</div>
</template>
in index.js
var Clientes = new Meteor.Collection('clientes')
Template.clientes.tables = function () {
return Clientes;
}
Template.clientes.tableSettings = function () {
return {
rowsPerPage: 10,
showFilter: false,
showNavigation: 'auto',
fields: [
{ key: 'nombre', label: 'Nombre' },
{ key: 'apellido', label: 'Apellido' },
{ key: 'correoe', label: 'E-mail' }
],
useFontAwesome: true,
group: 'client'
};
}
With this I can display all the records in the collection.
I hope this help you to go any further.
Courses is the collection object. To get some courses, you need to query the courses with find:
Courses.find()
However, to make this accessible in the template, you need a helper function.
//course_table.js
Template.courseTable.helpers({
courses: function () {
return Courses.find()
}
});
Then you can can set the table collection using the helper method (I used a lowercase "courses" for the helper method for clarity):
{{> reactiveTable collection=courses}}