CODEWITHSUNDEEP
meteor
user2344293
user2344293

Reputation: 173

How to append Template Data to another Template based on Button Click in Meteor JS?

One template have button and another template have contains one text field.When ever button clicked that text filed append to the button template at the same time not remove the previous text fields that means the button clicked in 4 times 4 text fields add to the button template.

See the following code :

HTML Code :

<head>
  <title>hello</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}

</body>

<template name="hello">


    Add Text Fields here :

    <button>add another text box</button>

</template>

<template name="home">

    <input type="text" id="name" />

</template>

JS Code :

if (Meteor.isClient) {


  Template.hello.events({
    'click button': function () {

     //Here to write append logic
    }
  });
}

I didn't get any idea about this.So please suggest me what to do for this?

Upvotes: 0

Views: 309

Answers (1)

pstuart2
pstuart2

Reputation: 362

Use a client side only collection. Clicking adds a new record. Then in home template you loop on this. new Meteor.Collection(null) the null will tell it that it is local only and won't actually create the collection in the MongoDB.

if (Meteor.isClient) {
    var buttonClicks = new Meteor.Collection(null),
            clickCounter = 0;

    Template.hello.events({
        'click button': function () {

            buttonClicks.insert({click: clickCounter++});
        }
    });

    Template.home.helpers({
        clicks: function () {
            return buttonClicks.find({});
        }
    });
}

<template name="home">
{{#each clicks}}
    <input type="text" id="name_{{click}}" />
{{/each}}
</template>

Upvotes: 2

Related Questions