Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Looking for a better way to code using meteorjs

Hy guys, i made some code using meteor and it's working, but i don't know if i did by the best way...so i'm asking for opinios, for other ways to solve the problem.

It's just a list of places, you can fill the textfield with a place and it'll appear on the list. you have an option to remove the place, by clicking on the "x".

Very simple, but i'm a meteor newbie!

let's show the code...

--> place_list.js

Places = new Meteor.Collection('placesNew');
if(Meteor.isClient){
  Template.places_list.places = function(){
    return Places.find({},{sort:{name: 1}});
   console.log(Template.place_list.place); 
  }

Template.places_list.events({
  'blur .place': function (obj) {
    Places.insert({name: obj.target.value});
  },
  'click .plc_remove': function(obj){
    Places.remove( obj.toElement.attributes['data-ref'].value);
  }
});

} --> place_list.html

<head>
  <title>Place List</title>
</head>
<body>
  <h1>Place List :</h1>  
  {{> places_list}}
</body>
<template name="places_list">
  <input type="text" placeholder="Insert a place here" class="place" />
<ul>
  {{#each places}}
  <li> {{ name}} | <a class="plc_remove" data-ref="{{_id}}" href="#">x</a> | </li>
  {{/each}}
</ul>
</template>

Note: This questions has been copied from Stack Overflow. Posted by user1880372. The bounty is provided by CodersClan.

User Gravatar

CodersClan

Posted Oct 2 2013 15:08 UTC

$10



1 Replies


Great start! You're very close. I changed things around a little bit, and added an extra template and a separate event map for that template. This should make it easier to understand, and it means you don't have to store the place's id in a data attribute. Check it out:

Places = new Meteor.Collection('places');

if(Meteor.isClient) {
    Template.places_list.places = function () {
        return Places.find({}, { sort: { name: 1 } });
    }

    Template.places_list.events({
        'keypress #place': function (evt) {
            if (evt.which === 13) {
                // The user pressed enter
                Places.insert({ name: evt.currentTarget.value });
                place.currentTarget.value = ''; // Reset the text input
            }
        }
    });

    Template.place_item.events({
        'click .plc_remove': function () {
            Places.remove(this._id); // Access the document fields with this.foo
        }
    });
}

And the HTML:

<head>
    <title>Place List</title>
</head>
<body>
    <h1>Place List :</h1>  
    {{> places_list}}
</body>

<template name="places_list">
    <input type="text" placeholder="Insert a place here" id="place" />

    <ul>
        {{#each places}}
            {{> place_item}}
        {{/each}}
    </ul>
</template>

<template name="place_item">
    <li> {{ name}} | <a class="plc_remove" href="#">x</a> | </li>
</template>
User Gravatar

BenjaminRH

Posted Oct 2 2013 17:09 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions