如何通过Meteor.js模板传播数据库ID？

Question

My question touches a common scenario with web apps: you have some kind of db items that map to some kind of sets of DOM items. Eg a JSON object that maps to a form with some fields.

Now imagine that in different locations / on different events inside your form you need that db id. On certain levels (in certain data contexts) the id will be available as this._id in Meteor events, but not in all since sub- #with statements might overwrite the data context.

What I do currently in those cases is I set in the template containing the form <form id="{{_id}}" ...> and then in events where this._id is not available I get it via $(this).closest('form').id . This works.

But my question is: is there a better way? how would you do it with Meteor?

Answer 1

This is something a lot of us are struggling with... gotta keep that DOM clean amirite?

1. If your DOM hierarchy is predictable, you can use Template.parentData(n) to get the parent data context.

2. Alternatively, if there's no relation to the context you need, use Blaze.getData(el) . I have a feeling this will become your new best friend. I know as soon as I stumbled upon it I felt like I was cheating it was so easy. Here's my favorite use for it (in an event, iterating over all input fields): var checkFields = t.findAll('input'); var allGood = true; for (var i = 0; i < checkFields.length; i++) { if (!simplyValid.validateField(Blaze.getData(checkFields[i]), checkFields[i].value)) allGood = false; } var checkFields = t.findAll('input'); var allGood = true; for (var i = 0; i < checkFields.length; i++) { if (!simplyValid.validateField(Blaze.getData(checkFields[i]), checkFields[i].value)) allGood = false; }

3. Next, if your top-most module has it's own route, you can store it as an iron router param. This is nice because it sticks the id in the url for easy sharing, I personally like clean urls, but other folks love this.

4. Finally, my own pattern is a module-scoped object. In my case, for each route, in the onCreated I set my object window.M = {} . Then, I fill it up with local collections, a reactive dictionary, and anything else I need. I clear it onDestroyed . Sure, it's technically a global, but the scope dies with the module.

5. Eliminate the #with : {{#with collection='clients'}} {{>subTemplate}} {{/with}} Becomes {{>subTemplate collection= 'clients'}}

6. Assign the #with to an object within the context: ``` {{#with collection='clients'}} {{>subTemplate name='foobar'}} //you lose the with context here {{/with}} Becomes {{>subTemplate collection=this name='foobar'}} //you keep context inside an object

7. Access initial parent data via spacebars' double dots & reference that context all the way down {{>subTemplate parent=..}} ```

Those are all the patterns I currently use to keep a clean DOM. Will be happy to edit if someone else suggests another.