due to lack of migration to Vue3 from Vuetify, I turned to Vuestic UI, which seems to do the job as intented, without to much of a pain to switch.
I have to display data, in a Data Table component, coming from an external API. Got it all working.
I'm using slots to control displayed data, but I'm missing a functionality which was implemented in Vuetify.
I have to access the current row's data in a cell to format an email address, but I can't get it to work.
Basically, i would like to get something as this code portion in Vuetify:
<v-data-table >
<template v-slot:item.colName="{ item }">
// Do something with the current item data
</template>
</v-data-table>
I came up with this code from the official documentation
<va-data-table>
<template #cell(email.0.value)="{ value }">
<a :href="`mailto:${value}?subject=${getRowDataHere}`">
{{ value }}
</a>
</template>
</va-data-table>
I don't know if I a missing something here, but I've been searching around since yersterday without any positive results.
EDIT: After diving in the Vuestic github Repo, and going through the main code, here is the solution for some in need :
<template #cell(colKey)="{ rowData }">
{{ rowData.property }}
</template>
Related
I have a template and I would like to pass an additional variable with it's data context:
<template name="list">
{{#each item}}
{{> listItem extraVariable=someValue}}
{{/each}}
</template>
<template name="listItem">
{{extraVariable}}
</template>
I seem to lose the original datacontext (this from the each block) if I do it like in the above snippet. How can I keep the original and still pass the extra information (I do not want to use session variables)
Meteor 1.2 and above:
{{#let x=y}}
let block helper lets you set a new variable without overriding the data context inside the block
More info: https://quip.com/RXFlAk9Rc2xI
I have several instances of sergeyt:typeahead working in my webapp. However today I am building a table out of data from query. One of the columns needs to allow for possibly selecting from a collection or if the user wants to enter their own value.
This has worked for me in other parts. Now it appears that when using an {{#each}} statement in the html and when the typeahead is inside the {{#each}} that it does not receive the injecting.
I believe this may be due to the fact that inject is typically done on the rendered which is run before the {{#each}} has run and created the dom elements. And if that is the case how would I go about then placing the inject on these newly generated elements?
You should be able to create a sub template for each stop:
<template name='myApp'>
{{#each stops}}
{{> stop}}
{{/each}}
</template>
<template name="stop">
<input class="form-control typeahead" ...>
</template>
This way you can call typeahead.inject on each instance after it is rendered.
Template.stop.onRendered(function() {
Meteor.typeahead.inject();
});
<template name="orderForm">
{{> photographyServicesForm}}
{{> videographyServicesForm}}
{{> onlineProductsForm}}
</template>
If I go to the orderForm page is there a way to get the data inside of the orderForm Blaze template instance when I'm in Chrome Console? I know how to get it inside the orderForm callbacks, events, helpers, and inside the HTML, but I want to be able to easily check up on it and even update it from the Chrome Console.
I also know that there are four different template instances when I go to this orderForm. Obviously Template.orderForm doesn't work because it's not the current template instance.
EDIT
Here's the answer:
<template name="orderForm">
<div id="orderForm">
{{> photographyServicesForm}}
{{> videographyServicesForm}}
{{> onlineProductsForm}}
</div>
</template>
Blaze.getData($('#orderForm')[0])
It should be noted that the same data available on the orderForm template is also available to its child templates - photographyServicesForm, videographyServicesForm, onlineProductsForm
You want to check out Blaze.getData and Blaze.getView.
With Blaze.getData you can simply do this:
Blaze.getData(document.querySelector('.someelement'))
This works pretty well, but you have to have an element inside the template-instance you can query for.
I am currently using Meteor 0.9.2.2. I am trying to better understand how to build a form in Meteor + Famous without having to put each form element into a Famous surface.
I am using the "gadicohen:famous-views 0.1.7" and "mjnetworks:famous 0.2.2 "
I am using https://github.com/gadicc/meteor-famous-views and have looked at some of the samples of events. I can generate events on the view but seems to have lost the ability to generate events using Jquery (probably Famous alarm bells going off) for fields on the template.
(Note I fid try following What is a recommended way to get data into your meteor template from the front-end for a famous surface? but that just directed me to the examples I am following - sorry still stuck)
For example, if I wanted to have a "blur" event when a contenteditable field changed and used that to update the database, I am not sure how I do it.
BTW, I am bringing in the template via Iron-router:
this.route('someTemplate', {
path: '/',
});
Here's some sample of code of what I have been playing around with:
<template name="someTemplate">
{{#Scrollview target="content" size="[undefined,100]"}}
{{#Surface class="green-bg"}}
<h4 id="main-edit-title" class="editable" data-fieldname="title" data-resourceid="{{_id}}" contenteditable=true>Heading</h4>
<p id="main-edit-message" class="mediumEditable editable" data-fieldname="message" data-resourceid="{{_id}}" contenteditable=true>Summary</p>
{{/Surface}}
{{/Scrollview}}
</template>
Template.someTemplate.events({
'blur .editable': function (e) {
e.preventDefault();
//e.stopPropagation();
var item = $(e.currentTarget);
DO SOME UPDATE STUFF TO THE DATABASE
item.removeClass('resourceUpdated');
},
});
I looked at the 'famousEvents' too and could not seem to get that working. Ie no events fired and that would only be at the surface level, not the field level.
At the view level I was fine and code below worked fine:
Template.someTemplate.rendered = function() {
var fview = FView.from(this);
var target = fview.surface || fview.view._eventInput;
target.on('click', function() {
clickeyStuff(fview);
});
}
I tried the other variants from this page: https://famous-views.meteor.com/examples/events
So the core questions, I think, is: Do I have to move every form element to a Famous Surface? This would be a killer. I am hoping I can still use Jquery or access the DOM for stuff within the template. Note I do see stuff in the Famous FAQ http://famo.us/guides/pitfalls that says don't touch the DOM... so happy to find out how else I should be doing this???
I tried to make this clearer on the events example page, but I guess I'm still not there yet. I'll answer below but please feel free to chime in with how I can improve the documentation.
Inside of a Surface is basically regular Meteor. But outside of a Surface is the realm of famous-views. So you need to have a Meteor template inside of a Surface for events to attach themselves properly - and, as noted in the docs - that template needs to have at least one element in side of it to attach the events. So either (and in both cases, renaming the outer template wrapper but leaving Template.someTemplate.events as is):
<template name="someTemplateWrapper">
{{#Scrollview target="content" size="[undefined,100]"}}
{{#Surface class="green-bg"}}
{{> someTemplate}}
{{/Surface}}
{{/Scrollview}}
</template>
or simply:
<template name="someTemplateWrapper">
{{#Scrollview target="content" size="[undefined,100]"}}
{{>Surface template="someTemplate" class="green-bg"}}
{{/Scrollview}}
</template>
and then move all the Meteor stuff that needs events to it's own template where the events are handled:
<template name="someTemplate">
<h4 id="main-edit-title" class="editable" data-fieldname="title" data-resourceid="{{_id}}" contenteditable=true>Heading</h4>
<p id="main-edit-message" class="mediumEditable editable" data-fieldname="message" data-resourceid="{{_id}}" contenteditable=true>Summary</p>
</template>
Hope that makes sense, just rushing out... let me know if anything is not clear and I'll ammend the answer later.
I am using Meteor 0.5.2 and trying to solve what seems to me is an obvious pattern that should have an easy solution.
I have a template that should return different chunk of data in each of template instances.
For example - I have a template showing TV program - show by show.
Then I need to display two instances of the same template with different data - one with past shows and one with upcoming shows.
So I have a tv program template:
<template name="tv_program">
{{#each shows}}
...
</template>
Ideally I would like do something like:
{{> tv_program past_shows}}
...
{{> tv_program upcoming_shows}}
to pass a parameter to tv_program template instance that I can read from JavaScript and adjust the mongo queries.
Currently I have copy/pasted my template/js code and adjusted the mongo queries but there has to be a better way.
I looked into partials/helpers with arguments but that doesn't seem to be the solution to my problem.
Thanks, Vladimir
You're approaching the problem at the wrong level. Rather than trying to tell your code what to do from your templates, you should tell your template what to do from your code. For instance:
Template.past_shows.shows = function() { return shows(-1); }
Template.upcoming_shows.shows = function() { return shows(1); }
function shows(order) {
return Shows.find({}, {$sort: order});
}
<template name="past_shows">
{{#each shows}}
{{> show}}
{{/each}}
</template>
<template name="upcoming_shows">
{{#each shows}}
{{> show}}
{{/each}}
</template>
<template name="show">
<li>{{_id}}: {{name}}</li>
</template>
If you are using a state machine for your app, such as meteor-router, you can use one template and populate it with upcoming or past shows depending on app state.