Data persistence on action

[William Hurley]

I have racer connected to mongo and getting updates from the UI to go directly there and also out to other clients. But I'm wondering if there is a way to have that step of saving to the data store and notification to other subscribers can happen after a particular action. The use case for this is an edit screen where the user makes edits to content and then has the option to save or discard these edits. Having all the edits as real time doesn't usually make sense in this case. Any suggestions on how I might be able to achieve this? Thanks.

[Juzer Ali]

Instead of subscribing to a particular path simply fetch and set it on some DOM events.

[William Hurley]

I tried using model.fetch instead of model.subscribe and it appeared to send updates as the form element was changed, which surprised me. In my page render function I have:

function renderEditSite(page, model, id) {

        model.fetch('sites.' + id, function(err, site) {

                model.ref('_site', site);  

         

                render('edit_site', page);

        })

}

And as I make changes I'm seeing them updated in mongo.

[László Bácsi]

There are two approaches for avoiding real time updates:

1. Using x-blur: <input type=text value={_someref} x-blur>

This might be good for single input forms, like search forms. It postpones model update until the blur event on the input.

2. Skip the model binding and use a submit event handler: <form x-bind=submit:postArticle>

I would go with this approach if the form is complex.

Best,

LacKac

[William Hurley]

So after the fetch set values in the model for each of the fields I'm using and then bind to those in the various input fields and then on the submit action subscribe, create a ref and then update that way?

[László Bácsi]

Not exactly. I'd still use subscribe but wouldn't create direct binding between the model and the form. Maybe an example will better illustrate. I'm just jotting this down and might not work out of the box.

in the route:

    model.subscribe('articles.1', function(err, article) {

      model.ref('_article', article);

      model.set('_article_form', article.get());

      page.render();

    });

in the view:

    <form x-bind=submit:updateArticle>

      <input type=text value={_article_form.title}>

      <textarea>{_article_form.body}</textarea>

    </form>

in the controller:

    exports.updateArticle = function(e) {

      model.set('_article', model.get('_article_form'));

[Ryan]

Hi Laszlo,

That worked great! I was wondering the same thing as the original poster and wanted to only persist my model to Mongo after the user clicks submit.

However, in my controller, I had to manually set each field like this:

model.set('_article.title', model.get('_article_form.title'));

model.set('_article.body', model.get('_article_form.body'));

Instead of being able to set it as a whole with one call like you demonstrated. Not sure why it wouldn't let me do it that way, but my way works fine if anyone runs into the same issue.