StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUpdating the client view in Meteor js after a database insertion
text
Body
copied!<h2>First off, some background</h2> <p>My client has a kind of a "split-view", meaning- a <em>side-panel</em> displaying a list of objects and a <em>main view</em> displaying the <em>selected</em> object's details. Every time the user clicks on an Object in the list, a Backbone's route is called to navigate to the id which updates a <strong>"selected"</strong> property on the <em>Session</em>, what causes the <em>main view</em> to update- pretty standard stuff.</p> <h2>The problem</h2> <p>I want the client to be as responsive as possible, therefore i'm trying to utilize Meteor's abillity to update the client immediately without waiting for a server confirmation. </p> <p>My goal is that every time an Object is created, the <em>list</em> and the <em>main view</em> will be instantly updated to reflect the newly added Object. To achieve this I created a Meteor.method, <em>create()</em>, that uses Collection.insert and returns the id so I can use it with my Route. The method is shared across the client and server and is being called from within a <strong>template's</strong> event handler. </p> <p>My first try was to store the returned id in a variable in the event handler and update the <em>Route</em> in the next line; For some reason, that didn't work because the method returned an <strong>undefined</strong> value. So I tried a different approach, instead of returning the id, I used it within the method to update the <em>Route</em> directly (if Meteor.isClient of course). That didn't work either because the id returned by Collection.insert in the client's version of the method was different from the one in the server's version.</p> <h3>First approach</h3> <pre><code>Template.createDialog.events({ 'click #btn-dialog-create': function (event, template) { var objectId = Meteor.call('create'); appRouter.navigate("object/id/" + objectId, {trigger:true}); } }); </code></pre> <h3>Second approach</h3> <pre><code>Meteor.methods({ create: function () { var ObjectId = Objects.insert({name:'test'}); if(Meteor.isClient){ appRouter.navigate("object/id/" + objectId, {trigger:true}); } } }); </code></pre> <p>If anyone knows what's going on and can give me some directions that would be great. Any different approaches to the problem or suggestions would be much appreciated as well.</p> <p>Thanks </p> <h2>Update</h2> <p>So I tried @Pent's suggestion and I got the same result as with my second approach. For some odd reason Meteor decides to <em>ignore</em> my id (created with <em>Random.id()</em>) and inserts the object with a different one. </p> <p>So I tried another approach, I used just a simple string value instead of Random.id() and voila - <strong>it worked.</strong> Riddle me that. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload