I've got this chunk of code in my controller to output everything I'd like to in the first row. The second row is going to be available upon a click action. However, I'm trying to make it so that when I click any row shown, it'll only display the 2nd row that given row. Not the 2nd row of all the others.
This is in my template.
{{#each chosenSomething as |something|}}
<tr class='main' {{action 'toggleHelp'}}>
<td>{{something.this}}</td>
<td>{{something.that}}</td>
<td>{{something.hey}}</td>
<td>{{something.you}}</td>
</tr>
{{#if isDisplay}}
<tr class='help'>
<td class='instruction'></td>
<td class='video'></td>
</tr>
{{/if}}
{{/each}}
This is my JS for the action.
toggleHelp() {
this.toggleProperty('isDisplay');
},
I know how I would approach this using jQuery, but I'd like to know the Ember way of doing such action. I thought about including index, but unsure how it should be written.
I would suggest making a component and handing the toggle within.
https://ember-twiddle.com/e6ccad3d2ffdc4a9d627db12a1317fa5?openFiles=templates.components.toggle-thing.hbs%2Ctemplates.components.toggle-thing.hbs
// toggle-thing.hbs
<header {{action 'toggleAnswer'}}>
{{data.question}}
</header>
{{#if open}}
<footer>
{{data.answer}}
</footer>
{{/if}}
// toggle-thing.js
import Ember from 'ember';
export default Ember.Component.extend({
// tagName: 'tr', // or whatever if you like
// classNames: ['thing', 'row', 'etc'], // smooth out the template a bit later...
open: false, // default
actions: {
toggleAnswer() {
this.toggleProperty('open');
console.log( this.get('open') );
},
},
});
// application.hbs or wherever you want to list the things
<ul class='thing-list'>
{{#each model as |thing|}}
<li class='thing'>
{{toggle-thing data=thing}}
</li>
{{/each}}
</ul>
has a 'thing' model and is pulling in some question answers to the model hook for example.
import Ember from 'ember';
var data = [
{
question: "How to be funny",
answer: "Stand on your head",
},
{
question: "How to be smart",
answer: "Just listen more often.",
},
];
export default Ember.Route.extend({
model() {
return data;
},
});
The Ember guide has a toggle example: https://guides.emberjs.com/v2.13.0/tutorial/simple-component/
Augment each element of chosenSomething to include the open/close state.
You'll then be able to have:
{{#each chosenSomething as |something|}}
<tr class='main' {{action 'toggleHelp' something}}>
<td>{{something.this}}</td>
<td>{{something.that}}</td>
<td>{{something.hey}}</td>
<td>{{something.you}}</td>
</tr>
{{#if something.isDisplay}}
<tr class='help'>
<td class='instruction'></td>
<td class='video'></td>
</tr>
{{/if}}
{{/each}}
and the JS:
toggleHelp(something) {
Ember.set(something, 'isDisplay', !something.isDisplay);
}
If you don't want to modify the original data, you can have a computed property generate the appropriate data such as:
chosenSomethingWithState() {
return (this.get('chosenSomething') || []).map((item)=>{isDisplay:false, item})
}.property('chosenSomething')
and adjust the template accordingly
Related
Problem : I am trying to create a table component for my app which would be use by other components to render a table. It could have three possible cell values :
Text
HTML
Component
I am able to render all the above values but I am stuck at binding an event listener. What I am trying to achieve is something like this :
Pass a method and event which is to be binded to the component and the table should bind that with respective cell.
So for example :
TABLE JSON
{
"cell-1":{
"type":"html",
"data":"<h4>text-1</h4>",
"method": someMethod
}
}
TABLE COMPONENT
<tbody>
<template>
<tr>
<td >
<span
v-if="type == 'html'"
v-html="data"
v-on:click.native="$emit(someMethod)"
v-on:click.native="someMethod"
></span>
</td>
</tr>
</template>
</tbody>
Above is just a snippet of what I am trying, the table loops through the object passed and renders accordingly.
I have already tried
SO Solution 1
SO Solution 2
Please let me know if any more info is required.
The best way is to have the method/handler inside the parent component and then trigger is using the emit functionality such that in
TABLE COMPONENT
<tbody>
<template>
<tr>
<td >
<span
v-if="type == 'html'"
v-html="data"
v-on:click.native="$emit('trigger-handler', {method: 'method1', data: {}})"
></span>
</td>
</tr>
</template>
</tbody>
and in
Parent.vue
<table-component #trigger-handler="triggerHandler" />
inside script
export default {
data() {
},
methods: {
triggerHandler(payload) {
// payload is actually the object passed from the child
this[payload.method](payload.data); // call a specific method
},
method1(data) {
},
method2(data) {
},
method3(data) {
}
}
}
does anyone know of a way to dynamically render vue.js components? For example, I have a table component that should render different buttons based on the prop definition:
Vue.component('my_table', {
template: '#my_table',
props: {
data: Array,
columns: Array,
actions: Array
}
});
Ideally, my template would be defined in the tmpl value of my action object:
<tbody>
<tr v-for="entry in data">
<td v-for="key in columns">
{{entry[key.field]}}
</td>
<td v-for="action in actions">
{{ action.tmpl }}
</td>
</tr>
</tbody>
Here's my fiddle:
https://jsfiddle.net/zfya92dh/43/
Anyone have any ideas?
Thanks in advance!
<component :is="action.tmpl"></component>
Here is your fiddle revised.
const button1 = Vue.extend({
template:'<button class="btn btn-primary">View</buttton>'
})
const button2 = Vue.extend({
template:'<button class="btn btn-primary" #click="some_method">Delete</buttton>',
methods:{
some_method(){
alert('clicked')
}
}
})
And the relevant data.
data: {
actions: [
{
name: 'view',
label: 'View Company',
method: 'click',
tmpl: button1
},
{
name: 'delete',
label: 'Delete Company',
method: 'click2',
tmpl: button2
},
],
You just want to insert HTML instead of plain text? Change
<td v-for="action in actions">
{{ action.tmpl }}
</td>
to
<td v-for="action in actions" v-html="action.tmpl"></td>
However, if your HTML includes Vue markup, the markup will not be respected. You will need to create actual components to represent each of your configurations and then use :is to tell Vue which one to use at a given time. Vue doesn't use string-based templating, so there is no way to make passing a template string work.
I have the below template file (actually used for my component)
{{#each details.secs as |sec|}}
<div class="row">
{{#each secs.flds as |fld|}}
// if fld.id is 'abc', use abc.hbs
// if fld.id is 'xyz', use xyz.hbs
{{/each}}
</div>
{{/each}}
My question is how can I use separate sub-template files and include them in the above parent file (based on condition)
Thus if field.id is 'abc', it should use rendering logic from abc.hbs
Also abc.hbs would need the 'field' model input for rendering purpose (It's output should get appended to the main template)
With Ember 2.0, creating and registering our own eq (equals) helper is super easy:
ember generate helper eq
Include our equality function:
// app/helpers/eq.js
import Ember from 'ember';
export function eq(params, hash) {
return (params[0] === params[1]);
}
export default Ember.Helper.helper(eq);
And use it!
{{#each details.sections as |section|}}
<div class="row">
{{#each section.fields as |field|}}
{{#if (eq field.id "abc")}}
{{abc-component data=field}}
{{/if}}
{{#if eq field.id "xyz)}}
{{xyz-component data=field}}
{{/if}}
{{/each}}
</div>
{{/each}}
In my Ember CLI app, I'm using {{#each}} helpers to output the rows of a table. 'name' 'created_date' and 'type' are all defined in the related model.
{{#each model as |job|}}
<tr>
<td>{{job.name}}</td>
<td>{{job.created_date}}</td>
<td>{{job.type}}</td>
<td>
{{#if typeZero}}
<p>Content that will display if the value of 'type' is 0.</p>
{{/if}}
</td>
</tr>
{{/each}}
In the fourth table cell of each row, I'd like to display certain content if that value of 'type' for that record is 0.
I first tried adding an itemController to the each helper:
{{#each job in model itemController="jobrowcontroller"}}
......
{{/each}}
This gave me an error: "Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed ***#controller:array:, but it should have been an ArrayController"
I found that itemController is now deprecated, and components should be used instead.
I created a component named job-table-row, and updated the page template:
{{#each model as |job|}}
{{#job-table-row model=job as |jobTableRow|}}
<tr>
<td>{{job.name}}</td>
<td>{{job.created_date}}</td>
<td>{{job.type}}</td>
<td>
{{#if typeZero}}
<p>Content that will display if the value of 'type' is 0.</p>
{{/if}}
</td>
</tr>
{{/job-table-row}}
{{/each}}
In the component handlebars file, I simply use {{yield}} and everything displays fine.
In the component js file, I have:
import Ember from 'ember';
export default Ember.Component.extend({
tagName: '',
typeZero: function() {
var currentStatus = this.get('model.status');
if (currentStatus === 0) {
this.set('typeZero', true);
} else this.set('typeZero', false);
}.on('didInsertElement'),
});
The problem with this is that the function 'typeZero' doesn't run. Is it possible to achieve this with a component, or do I need to use a different method altogether?
You cannot yield because typeZero only exists inside the component. Instead, move the template to the component:
// templates/components/job-table-row.hbs
<td>{{model.name}}</td>
<td>{{model.created_date}}</td>
<td>{{model.type}}</td>
<td>
{{#if statusZero}}
<p>Content that will display if the value of 'status' is 0.</p>
{{/if}}
</td>
And simplify your template outside:
<table>
<tbody>
{{#each model as |job|}}
{{job-table-row model=job}}
{{/each}}
</tbody>
</table>
Also, you can replace your complex method with a computed property:
// components/job-table-row.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'tr',
statusZero: Ember.computed.equal('model.status', 0)
});
See it all working at http://ember-twiddle.com/de8a41b497ef4f116bab
Let's say I have a Posts collection, the data for which looks like this:
var post1 = {
title: "First post",
post: "Post content",
comments: [<comment id>, <another comment id>, <etc>]
};
And I have a corresponding Comments collection. I've published and subscribed to both collections and want to display a post with it's comments.
How do I go about displaying the comments for that specific post?
<template name="post">
<h1>{{title}}</h1>
<p>{{post}}</p>
{{#each comments}}
// Only have access to the ID
{{/each}}
</template>
I could create a helper like this:
Template.post.helpers({
displayComment: function(id) {
return Comments.findOne(id).fetch().comment;
}
});
and do:
<template name="post">
<h1>{{title}}</h1>
<p>{{post}}</p>
{{#each comments}}
{{displayComment #index}}
{{/each}}
</template>
But then I'd have to create a helper for each of the comment object's properties, etc.
What's the clean way to do it? I don't want to populate the comments field on the post object, since that would mean calling .fetch(), and posts would no longer be reactive.
A couple of suggestions:
<template name="post">
<h1>{{title}}</h1>
<p>{{post}}</p>
{{#each comments}}
{{#with commentDetails}}
{{userName}} //
{{content}} // These are properties of a comment document
{{upvotes}} //
{{/with}}
{{/each}}
</template>
Template.post.helpers({
commentDetails: function() {
return Comments.findOne(this);
}
});
That will set the data context within each with block to be the comment object returned by looking up the current _id (which is the value of this in the commentDetails helper within the each block).
An alternative would be to just use an each block on its own, but have it iterate over a cursor:
<template name="post">
<h1>{{title}}</h1>
<p>{{post}}</p>
{{#each commentCursor}}
{{content}}
... // other properties
{{/each}}
</template>
Template.post.helpers({
commentCursor: function() {
return Comments.find({_id: {$in: this.comments}});
}
});