CODEWITHSUNDEEP
javascriptmeteorhandlebars.js
Euphe
Euphe

Reputation: 3699

How to get an object by clicking a button on the page?

I have that web app I am working on. Here is a picture.

The idea is that there is an array of objects, it gets displayed as a row of divs. Each of these objects also has an array of objects inside them and they are displayed as a row of divs inside these divs.

The user should be able to add new objects to the objects listed on the page. That should be accessed by pressing "Edit".

The problem: How do I make the script grab the objects from that div that was clicked and display them in a window? I am using meteor bootstrap package.

Ask me questions if you didn't understand something - that stuff is like a maze.

Javascript

var state = 0;
var 
    sides = [

        {
        name:"MURICA", 
        types:[

                {
                    name:"EAGLE",
                    desc:"FREEDUM",
                    power:10
                }

            ]
        }

    ];

if (Meteor.isClient) {
    Template.global.side = function(){
        var obj = [], m;
        m = 1;
        for (var i in sides){
            obj.push({
                index : m,
                object : sides[i]
            });
        }
        console.log(JSON.stringify(obj));
        return obj;
    }
    Template.content.state = function(){
        return state;
    }
    Template.global.events ({
        'click .edit': function(){
            jQuery('#edit').toggle()
            console.log("PRESSED FREEDOM");
        }
    });
}

HTML can be found here (was too big to post) http://pastebin.com/kmNnSV1w

Upvotes: 1

Views: 108

Answers (1)

Hubert OG
Hubert OG

Reputation: 19544

This may be helpful:

html 

<template name="asdf">
    <div class="asdf-box" data-nameOfTheParam="{{putSomeValueHere}}">
        <span class="asdf-button">Click me!</span>
    </div>
</template>

js

Template.asdf.events({
    'click .asdf-button': function(e) {
        console.log( $(e.target).closest('.asdf-box').data('nameOfTheParam') );
    }
});

When working with database items, you may just use the id: data-id={{_id}} and fetch the desired object in the callback based on this id.

Upvotes: 1

Related Questions