CODEWITHSUNDEEP
javascriptmeteormeteor-blaze
Todilo
Todilo

Reputation: 1333

Meteor working with an "empty" object

What is the correct approach when working with an "new object" that is to be saved in a collection. Say I have a collection Cars. I have a /cars/new-car url and then a form with:

name: __

parts: list of parts here

If I want to make this form "reactive" in the sense that if I add a new part in the parts array it shows a rerender is the best approach to make the whole "Car" a reactive object. Or should one just add a new row in the dom?

I dont want to automatically insert the whole thing into the "Cars" collection until It has a name and a list of parts.

Most examples shows very simple of adding to collection -> rerender of DOM which is very straightforward.

Edit: The same concept may apply to when editing a car. Fetching the car from a collection, setting up so the returned object is reactive(so I can add/remove parts) when done get all values and store the edited car information.

Upvotes: 0

Views: 217

Answers (2)

Toby Liu
Toby Liu

Reputation: 1267

Consider using Session for your /cars/new-car page

When the page first loads

Session.set('parts', []});
Session.set('name', '');

When the user saves a part

var addedPart = getPart();
var update = Session.get('parts').push(addedPart);
Session.set('parts', update);

Then your template helper functions can get everything it needs to render the view by calling Session.get(). 

Template.view.helpers({
    currentParts: function() {
        return Session.get('parts');
    }
});

What do you think? I'm fairly new to Meteor myself, so there maybe even more clever ways to do batch updates on the session. But this is general gist.

Upvotes: 0

corvid
corvid

Reputation: 11187

Start out by initializing an "empty" car as a reactive variable.

Template.cars.onCreated(function () {
  this.car = new ReactiveVar({}); // empty car
});

Say your dom has some sort of attribute on each field describing which key it is:

<input data-key="name" placeholder="Car name"/>

Then you can bind an event that will use the data from this to update the reactive variable.

Template.cars.events({
  'change input': function (e, template) {
    template.car.set(_.extend(template.car.get(), {
      [$(e.target).data('key')]: $(e.target).val()
    }));
  }
});

This will construct the object as you fill in your inputs.

Upvotes: 1

Related Questions