These are templates:
<template name="postsList">
{{#each posts}}
{{>postItem}}
{{/each}}
</template>
<template name="postItem">
<div class="more-less">
<div class="more-block">
<p>{{{text}}}</p>
</div>
<p class="continued">…</p>
[ + ]
</div>
</template>
When posts is updated with new post, postItem is inserted to postsLists. How can I apply this only for new inserted postItem template:
$('.more-less .more-block').css('height', 20).css('overflow', 'hidden');
Template.postItem.rendered affects all posts in page, but I need to affect only newly inserted post without affecting existing ones.
I'm going to assume new posts are added to the top of the list? if so...
<template name="postsList">
<div class="posts-list">
{{#each posts}}
{{>postItem}}
{{/each}}
</div>
</template>
<template name="postItem">
<div class="more-less">
<div class="more-block">
<p>{{{text}}}</p>
</div>
<p class="continued">…</p>
[ + ]
</div>
</template>
You can simply achieve this with CSS:
.posts-list .more-less:first-child .more-block {
height: 20px;
overflow: hidden;
}
No need to use JavaScript and worry about reactivity and DOM mutation.
Related
I want to make v-for loop without any html element so I decided to use <template as parent. I don't know to assign :key for this loop. I can't assign it to template and to every div inside loop. Any ideas?
<template
v-for="{ id, text, option, percentage, value } in reports"
>
<div class="table-row__index">
{{ id }}
</div>
<div class="table-row__title">
<p>{{ text }} - <strong>{{ option }}</strong></p>
</div>
<div class="table-row__info">
{{ percentage }}%
</div>
<div class="table-row__info">
{{ value }}
</div>
</template>
As a good practice we should always have a parent element inside. But due to your constraints, it's okay to use for loop on template as given in official docs
https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
In this case, any keys have to be added to child elements/components and this is what officially recommended.
See this example and please add keys to your div's inside template.
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="n in 5">
<span :key="'number' + n">{{ n }}</span>
<span :key="'dot' + n">. </span>
</template>
</div>
you just can't have the for loop in your template. The for loop directive is only allowed to be inside the first child component ( or root component) inside your template.
Here is an example of how you can render your loop:
<template>
<div class="cant-have-for-loop-this-is-the-root-component">
<div v-for="{ id, text, option, percentage, value } in reports" :key="{id}">
<div class="table-row__index">
{{ id }}
</div>
<div class="table-row__title">
<p> {{ text }} - <strong>{{ option }}</strong></p>
</div>
<div class="table-row__info">
{{ percentage }}%
</div>
<div class="table-row__info">
{{ value }}
</div>
</div>
</div>
</template>
This runs soomthly, and with no hesitations. And renders with no styling as this screenshots depicts:
Hope this answers what you want to achieve.
Here's the relevant code template code:
<!-- display a list of users -->
<template name="available_user_list">
<h2 class="cha_heading">Choose someone to chat with:</h2>
<div class="row">
{{#each users}}
{{> available_user}}
{{/each}}
</div>
</template>
<!-- display an individual user -->
<template name="available_user">
<div class="col-md-2">
<div class="user_avatar">
{{#if isMyUser _id}}
<div class="bg-success">
{{> avatar user=this shape="circle"}}
<div class="user_name">{{getUsername _id}} (YOU)</div>
</div>
{{else}}
<a href="/chat/{{_id}}">
{{> avatar user=this shape="circle"}}
<div class="user_name">{{getUsername _id}}</div>
</a>
{{/if}}
</div>
</div>
</template>
<template name="chat_page">
<h2>Type in the box below to send a message!</h2>
<div class="row">
<div class="col-md-12">
<div class="well well-lg">
{{#each messages}}
{{> chat_message}}
{{/each}}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form class="js-send-chat">
<input class="input" type="text" name="chat" placeholder="type a message here...">
<button class="btn btn-default">send</button>
</form>
</div>
</div>
</template>
<!-- simple template that displays a message -->
<template name="chat_message">
<div class="chat-message">
{{> avatar user=user size="small" shape="circle"}} <div class="chat-center">{{user}}: {{text}}</div>
</div>
</template>
and the template helpers:
Template.available_user_list.helpers({
users:function(){
return Meteor.users.find();
}
})
Template.available_user.helpers({
getUsername:function(userId){
user = Meteor.users.findOne({_id:userId});
return user.username;
},
isMyUser:function(userId){
if (userId == Meteor.userId()){
return true;
}
else {
return false;
}
}
})
Template.chat_page.helpers({
messages:function(){
var chat = Chats.findOne({_id:Session.get("chatId")});
return chat.messages;
},
other_user:function(){
return ""
},
})
Template.chat_message.helpers({
user: Meteor.user()
})
I'm making an website where users can log in and chat with each other. I've downloaded the utilities:avatar package to show the avatars of the users. The avatar image is based on the first initial of the username of the user. When I render the avatar template in the template available_user with the code {{> avatar user=this shape="circle"}}, it shows the initials in the avatars fine because it's with the context of the users collection.
I also want to show the avatar when a user sends a message but the template chat_message is within the data context of an array inside the chats collection. So it only shows the default avatar without the initial.
the documentation for the package doesn't quite specify how I can set the template parameter for user or userId. Can someone please help with this issue?
I figured it out. I included the user id into each object in the messages array under the field userId and in the template I set it as {{> avatar userId=userId size="small" shape="circle"}}
I have an {{#each}} block that runs through a list of stops that a driver must make. Each stop needs to have a select run and the select draws in from another collection. So I have the select in another {{#each}}.
Now I need to programmatically check if a driver was already selected in the db for this particular stop as the select is running and have it get selected.
My problem is that I need to access info from the external {{#each}} to do the comparison in the internal {{#each}}.
Below is the code that I have but when I run it the stopNum is undefined.
Any help here is greatly appreciated.
<td class="text-left">
{{#if notEquals stopNum 0}}
<select class="form-control driverName clearForm" id="driverName{{stopNum}}" name="driverName{{stopNum}}">
<option value="" ></option>
{{#each drivers}}
{{#if dispatchDriverSelected driversName stopNum}}
<option value="{{driversName}}" selected>{{driversName}}</option>
{{else}}
<option value="{{driversName}}">{{driversName}}</option>
{{/if}}
{{/each}}
</select>
{{/if}}
</td>
Within #each, the context is set to the current element.
If you want to get an external item/property, you can get the parent context using .. in the template code or using Template.parentData(numLevels) in helpers:
{{#each drivers}}
{{#if dispatchDriverSelected driversName ../stopNum}}
<option value="{{driversName}}" selected>{{driversName}}</option>
{{else}}
<option value="{{driversName}}">{{driversName}}</option>
{{/if}}
{{/each}}
Here is a simple example:
Template structure:
<template name="example">
{{#with datum}}
<div class="wrapper">
{{outer}}
<div class="items">
{{#each inner}}
<div class="inner">
{{prop}} {{someFunc ../outer}}
</div>
{{/each}}
</div>
</div>
{{/with}}
</template>
Helpers:
Template.example.helpers({
datum() {
return {
outer: 'outer 1',
inner: [{
prop: 'inner 1'
},{
prop: 'inner 2'
}]
}
},
someFunc(datum) {
return `processed ${datum}`;
}
});
renders to:
<div class="wrapper">
outer 1
<div class="items">
<div class="inner">
inner 1 processed outer 1
</div>
<div class="inner">
inner 2 processed outer 1
</div>
</div>
</div>
I have been reading these tutorials on Spacebars.
Understanding Spacebars by David Burles
Meteor's Spacebars README on Github
Discover Meteor's Spacebars secrets
I think I can understand pretty good, but I am having this problem
i have the main.html template like this
<template name="main">
<div class="container">
<section id="bl-work-section">
<div class="bl-box">
<h4 class="sin">Próximo</h4>
<h2 id="titulo1" class="sin"></h2>
<h4 class="sin" id="sub1"></h4>
</div>
<div class="bl-content">
<h2>Lunes 25 de Noviembre del 2014</h2>
{{#each mostrarLunes}}
{{> Lunes}}
{{/each}}
<a></a>
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
<!-- Panel items for the works -->
<div class="bl-panel-items" id="bl-panel-work-items">
{{#each mostrarLunes}}
{{showPromos}}
{{/each}}
</div>
</div>
</div><!-- /container -->
</template>
So like you guys see im calling 2 templates inside main template and that 2 templates look like this
Lunes.html Template
<template name="Lunes">
<ul id="bl-work-items">
<li data-panel="panel">
<div class="oferta">
<h3>Promocion: {{metadata.nombrePromo}} </h3><br><small>Descripcion:{{metadata.descripcionPromo}}</small>
</div></li><br><br>
</ul>
</template>
showPromos.html Template
<template name="showPromos">
<div data-panel="panel">
<div>
<h1>Estoy viendo esto en la segunda pagina </h1>
<h3>Nombre Promo {{metadata.nombrePromo}}</h3>
<p>Descripcion promo.{{metadata.descripcionPromo}}</p>
</div>
</div>
<nav>
<span class="bl-icon bl-icon-close"></span>
</nav>
</template>
So what is the problem? well if we look at the template Lunes and showPromos, i have a Data-Panel="panel", but its seems like that data panel don't work when i wrap that value on the {{each}} tags, because if i use, that {{each}} tags outside the data-panel selector it works, so its seems like its not working seems like they don't have connection.
so im asking if there is a way to connect that value? already try helper attributes like the 3rd link says, and don't work, the attributes helpers look like this
Template.main.helpers({
attributes: function () {
return {
dataPanel: "prueba",
}
}
});
Helper mostrarLunes
Template.main.helpers({
'mostrarLunes' : function(){
return Promociones.find({'metadata.diaOferta' : { $in: ['Lunes'] } });
}
});
Looks like the data context isn't set. Try creating a template helper for your other templates with the data (I don't understand Spanish so I'm assuming this is the MongoDB cursor you need...
Templates.lunes.helpers({
data: function() {
return Promociones.find({'metadata.diaOferta' : { $in: ['Lunes'] } });
}
});
Templates.showPromos.helpers({
data: function() {
return Promociones.find({'metadata.diaOferta' : { $in: ['Lunes'] } });
}
});
I'm messing around with JSON structures in EmberJS starting from the top level Application level and trying to pass data to a general MenuController/MenuView child so I can reuse it.
The JSON I've come up with to play around with how data gets passed through nested ember structures is this:
JSON
{
appName: "CheesyPuffs"
menuItems: [
{name:"Gouda"}
{name:"Crackers", menuItems: [
{name: "Cheezeits"}
]
}
]
}
Handlebars
<script type="text/x-handlebars">
<div class='app'>
<div class='header'>
{{#if menuItems}}
// Embed template 'menu'
{{/if}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="menu">
<ul>
{{#each menuItems}}
<li>{{name}}</li>
{{#if menuItems}}
// Embed menu template
{{/if}}
{{/each}}
</ul>
</script>
JS
App.MenuController = Ember.ArrayController.extend({
actions: {
click: function(){
// Signal Event to App
}
}
});
App.MenuView = Ember.View.extend({
click: function(){
console.log("I clicked a menu");
}
});
All the examples I've seen concerning nested stuff involves routes with the classic _id subroute. I'm not sure how I would go about telling the App Router that it needs to pass the menuItems data to a child controller that's embedded in the same view. I have a feeling you can do this both via the template and programmically? If so, how would you do it both ways?
using the template you should use render. And that's the way you should do it, programmatically doesn't make sense.
<script type="text/x-handlebars">
<div class='app'>
<div class='header'>
{{#if menuItems}}
{{render 'menu' menuItems}}
{{/if}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="menu">
<ul>
{{#each menuItems}}
<li>{{name}}</li>
{{#if menuItems}}
{{render 'menu' menuItems}}
{{/if}}
{{/each}}
</ul>
</script>