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}}
Related
Currently I'm working on a project based on Meteor as back end and React as front end. I really enjoyed simplicity untill I removed insecure package and have to deal with Meteor methods. Right now I need to perform a basic insert operation and I'm just stucked!
I have a form as component (in case eventually I'd like to use this form not only for inserting items but for editing those items as well) and here's my code for this form:
AddItemForm = React.createClass({
propTypes: {
submitAction: React.PropTypes.func.isRequired
},
getDefaultProps() {
return {
submitButtonLabel: "Add Item"
};
},
render() {
return (
<div className="row">
<form onSubmit={this.submitAction} className="col s12">
<div className="row">
<div className="input-field col s6">
<input
id="name"
placeholder="What"
type="text"
/>
</div>
<div className="input-field col s6">
<input
placeholder="Amount"
id="amount"
type="text"
/>
</div>
</div>
<div className="row">
<div className="input-field col s12">
<textarea
placeholder="Description"
id="description"
className="materialize-textarea">
</textarea>
</div>
</div>
<div className="row center">
<button className="btn waves-effect waves-light" type="submit">{this.props.submitButtonLabel}</button>
</div>
</form>
</div>
);
}
});
This chunk of code is used as a form component, I have a prop submitAction which I use in let's say add view:
AddItem = React.createClass({
handleSubmit(event) {
event.preventDefault();
const
name = $('#name').val(),
amount = $('#amount').val(),
description = $('#description').val();
Items.insert(
{
name: name,
range: range,
description: description,
createdAt: new Date(),
ownerId: Meteor.userId()
},
function(error) {
if (error) {
console.log("error");
} else {
FlowRouter.go('items');
};
}
);
},
render() {
return (
<div className="row">
<h1 className="center">Add Item</h1>
<AddItemForm
submitButtonLabel="Add Event"
submitAction={this.handleSubmit}
/>
</div>
);
}
});
As you can see I directly grab values by IDs then perform insert operation which works absolutely correct, I can even get this data displayed.
So now I have to remove insecure package and rebuild the whole operation stack using methods, where I actually stucked.
As I understand all I should do is to grab same data and after that perform Meteor.call, but I don't know how to pass this data correctly into current method call. I tried considering this data right in the method's body which doesn't work (I used the same const set as in AddItem view). Correct me if I'm wrong, but I don't think this method knows something about where I took the data (or may be I don't really get Meteor's method workflow), so by this moment I ended up with this code as my insert method:
Meteor.methods({
addItem() {
Items.insert({
name: name,
amount: amount,
description: description,
createdAt: new Date(),
ownerId: Meteor.userId()
});
}
});
and this is how I changed my handleSubmit function:
handleSubmit(event) {
event.preventDefault();
const
name = $('#name').val(),
amount = $('#amount').val(),
description = $('#description').val();
Meteor.call('addItem');
},
Also I tried declaring method like this:
'addItem': function() {
Items.insert({
// same code
});
}
but it also didn't work for me.
Again, as I understand the problem isn't about data itself, as I wrote before it works just right with insecure package, the problem is how the heck should I get this data on the server first and right after that pass this to the client using methods (also console gives no even warnings and right after I submit the form, the page reloads)?
I've already seen some tutorials and articles in the web and didn't find desicion, hope to get help here.
You can add your data as parameters in your Meteor call function. You can also add a callback function to check on the success of the call.
handleSubmit(event) {
event.preventDefault();
const
name = $('#name').val(),
amount = $('#amount').val(),
description = $('#description').val();
Meteor.call('addItem', name, amount, description, function(err, res) {
if (err){
console.log(JSON.stringify(err,null,2))
}else{
console.log(res, "success!")
}
});
},
In your Meteor methods:
Meteor.methods({
addItem(name, amount, description) {
var Added = Items.insert({
name: name,
amount: amount,
description: description,
createdAt: new Date(),
ownerId: Meteor.userId()
});
return Added
}
});
I am trying to display my Orders collection. The Orders collection schema has a select field populated from the Items collection.
I cannot seem to get the Orders collection to display on my admin's template. I have verified that I am posting to the collection with Mongol and I'm not receiving any errors in console. I have also tried displaying it in a tabular table with no luck.
Any ideas? I'm still learning meteor and have been staring at this screen for hours.. maybe need some fresh air now and a fresh look later...
/collections/orders.js
Orders = new Mongo.Collection("orders");
Orders.attachSchema(new SimpleSchema({
station: {
type: String,
label: 'Station',
max: 2,
},
itemselect: {
type: [String],
label: 'Items',
optional: false,
autoform:{
type: "select",
options : function() {
return Items.find().map(function (c) {
return {label: c.name , value: c._id}
})
}
}
}
}));
/templates/admin.html
<template name="ordersTable">
<div class="admin">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">
<button type="button" class="btn btn-default navbar-btn">Orders</button>
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
{{#each orders}}
<li>{{> station}}</li>
{{/each}}
</ul>
</div>
<div class="panel-footer">
{{> addOrderFormAdmin}}
</div>
</div>
</div>
</div>
</template>
/templates/admin.js < This ended up being my problem..
Template.dashboard.rendered = function() {
return Orders.find();
};
**should be a helper.. so this instead:
Template.ordersTable.helpers({
orders: function () {
return Orders.find();
}
});
Insert Order Form
<template name="addOrderFormAdmin">
{{> autoformModals}} <!-- this is required for this modal to open -->
{{#afModal class="btn btn-primary" collection="Orders" operation="insert"}}
Add New Order
{{/afModal}}
</template>
Your code inside your dashboard rendered callback does not make any sense. I think you want to create a helper function for your ordersTable template instead:
Template.ordersTable.helpers({
orders: function () {
return Orders.find();
}
});
Furthermore, please note that Template.myTemplate.rendered is deprecated in Meteor version 1.0.4.2 (and later), use Template.myTemplate.onRendered instead.
Check publish and subscribe if you have removed the autopublish package. First, see if you can reach the collection through the console(on the web page, not the command line). Second, see if the collection is updated after your posts (for this you could use the command line by typing "meteor mongo" while the server is running or just download Robomongo).
Router.route('/product/:product_id', {
template: 'productmain',
//data: function() {
// //console.log(this.params.product_id);
// return this.params.product_id;
//}
data: function (){
_id = this.params.product_id;
product = Products.find({pid: _id});
templateData = {
_id: _id,
product: Products.find({pid: _id}),
title: product.title
};
return templateData;
}
})
title & product seem to be empty, any ideas?
I can't fathom why these two are not working in my template:
<div class="col-md-9 col-xs-9">
<h1>{{ title }}</h1>
</div>
<div class="col-md-9 col-xs-9">
<h1>{{ product.title }}</h1>
</div>
If I do a Products.find({pid: _id}) in a helper function it works fine but I need a different display for this one product, hope that make sense.
Just use product = Products.findOne({pid: _id}); in your data function. You're showing an individual product in a template, not a cursor.
You could simplify the whole thing as follows:
Router.route('/product/:product_id', {
template: 'productmain',
data: function (){
return Products.findOne({pid: this.params.product_id});
}
});
then in your html just do:
<div class="col-md-9 col-xs-9">
<h1>{{_id}}{{ title }}</h1>
</div>
Basically the data function returns a single object which becomes this for the template. All attributes of this are available without prefixing, i.e. {{this._id}} can be shortened to {{_id}}
I am using mizzao:autocomplete package in one of my search field in my application. Autocomplete is working fine and auto-suggestion is coming from my DB. As per given in the usage documentation this package using separate template for showing the suggestion list. Usually when someone select from given suggestion, the list will disappear and selected value appears in the textbox.
Now what i want is manually trigger some event in title template & do some extra stuff in autoComplete template when someone select some suggestion..
autoComplete.html
<template name="autoComplete">
<div class="col-md-4">
<h4>Auto Complete</h4>
{{> inputAutocomplete settings=settings id="jobTitle" class="form-control" name="title" placeholder="Job Title" autocomplete="off"}}
</div>
</template>
<template name="titles">
{{title}}
</template>
autoComplete.js
Template.autoComplete.helpers({
settings : function() {
return {
position: 'bottom',
limit: 10,
rules: [
{
collection: JobTitleCollection,
field: 'title',
matchAll: true,
template: Template.titles
}
]
};
}
});
You want to use the autocompleteselect event, as described in the docs.
Template.foo.events({
"autocompleteselect input": function(event, template, doc) {
console.log("selected ", doc);
}
});
(Disclaimer: I am mizzao.)
I am new to Meteor and I'm trying to set the data context in a page that displays one passage. I need to access the data in passage_item.js Template.passageItem.rendered but no context is set at that point. I think I need something like {{#with passage}} but "passage" does not exist in one_passage.html.
Here are some code snippets. Thanks.
router.js
Router.map(function() {
this.route('passagesList', {path: '/'});
this.route('onePassage', {
path: '/passages/:_id',
data: function() { return Passages.findOne(this.params._id); }
});
});
one_passage.html
<template name="onePassage">
{{> passageItem}}
</template>
passage-item.html
<template name="passageItem">
<div class="passage">
<div class="one-passage">
<h4>{{title}}</h4>
<div class="passage-content">
{{content}}
</div>
</div>
</div>
passage_item.js
Template.passageItem.helpers({
});
Template.passageItem.rendered = function() {
Meteor.defer(function() {
$('.passage-content').lettering('words');
//I want to be able to access the data object here. I have a list of words that are highlighted
});
};
Collection
Assuming you created your Passages collection like this and you've got autopublish turned on (which it is by default):
Passages = new Meteor.Collection('passages');
Router Map
And you mapped your router like this:
Router.map(function() {
this.route('onePassage', {
path: '/passages/:_id',
template: 'passageItem' // <-- to be explicit
data: function() {
return Passages.findOne(this.params._id);
}
});
});
Template
And your template looks like the template below:
<template name="passageItem">
<div class="passage">
<div class="one-passage">
<h4>{{title}}</h4>
<div class="passage-content">
{{content}}
</div>
</div>
</div>
</template>
The scope of 'this' in the template will be set to document returned by the Passages.findOne selector.
If the template doesn't render that means you're either searching for passage that doesn't exist, or your passage is missing title or content fields.
Rendered Function
Now for the last part of your question. The scope of 'this' in a rendered function is set to the template instance. So if you need to access the template data try this:
Template.passageItem.rendered = function() {
console.log(this.data); // you should see your passage object in the console
};
As of Meteor 1.0.3.1, the new Iron Router data selector appears to be...
Template.TemplateName.rendered = function() {
console.log(UI.getData());
};
I assume a passage consists of {'title':'', 'content':''}
Then this should work:
in router.js
Router.map(function() {
this.route('passagesList', {path: '/'});
this.route('onePassage', {
path: '/passages/:_id',
data: {
passage: function() { return Passages.findOne(this.params._id); }
}
});
});
in passage-item.html:
<template name="passageItem">
{{#each passage}}
<div class="passage">
<div class="one-passage">
<h4>{{title}}</h4>
<div class="passage-content">
{{content}}
</div>
</div>
</div>
{{/each}}
</template>