CODEWITHSUNDEEP
node.jsbackbone.jsexpresssails.jswaterline
sçuçu
sçuçu

Reputation: 3070

Updating a Backbone model persistently by Express

I am trying to update a data represented as a model in a collection in client side and a document in the mongo db collection. The event trigger the method that does this is clicking an element on a view. client side is a Backbone app.

On the server side I use node with Express and Mongodb with Waterline ORM. For this request I use:

app.put('/posts/:id', function(req, res){
app.models.posts.update( req.params.id, function(err, result){
    if(err) return res.status(500).json({ err: err });
    res.json( result );
});

});

event method in the view is:

    updatePost: function(e){
    e.preventDefault();
    //update the new content of the fields on the server.
        //find model to update in the collection by colleciton.findWhere.
    this.modelid = $(e.currentTarget).attr('id');
    this.modeltoupdate = this.collection.findWhere( { id: this.modelid } );
        //change model attributes as needed by model.set().
    this.modeltoupdate.set(
        {
            title: $('#title').text(),
            body: $('#body').text(),
        });
        //save the model on server with wait:true to wait server aknowledge, and add to colelction adn rerender view.
    this.modeltoupdate.save(
        {
            wait:true,
            success: function(){
                this.collection.add( this.modeltoupdate );
                this.render();
                this.renderPost();
            },
        }
    );
},

the template for this view is:

<script type="text/template" id="postTemplate">
        <a href="/">All Posts</a>

        <p id='author'>{{author}}</p>
        <p id='title' contenteditable='false'>{{title}}</p>
        <p id='createdat'>{{createdAt}}</p>
        <p id='body' contenteditable='false'>{{body}}</p>
        <a id='{{id}}' class='editpost' href=''>Edit this post</a>
        <a id='{{id}}' class='updatepost' href=''>Update this post</a>

        <a href="/">All Posts</a>
    </script>

But I see a always loading resource with an icon revolving put in the resources list in the Safari inspector. Clicking it and inspecting the request and response related to it shows request is the model's attributes with the updated fields as intended but response shows a loading gif, no response.

There is no problem with the content editable attribute they are both set to true when the Update this post link is clicked.

Is that with the server side route I create, the req params or req body? BB sends them with to the target /posts/548e00e61e96a70d0fa4ad50, so /posts/:id, which seems my app.put() url is correct.

Upvotes: 1

Views: 111

Answers (1)

s&#231;u&#231;u
s&#231;u&#231;u

Reputation: 3070

The problem is with the server-side code, in the app.put() function. The code fragment is calling this function with an obligatory argument missing, the second argument is not supplied to it. The second argument is the new values to be put into existing model which is selected by the search criteria, the first argument.

app.put('/posts/:id', function(req, res){
  app.models.posts.update( {id: req.params.id}, req.body, function(err, result){
    if(err) return res.status(500).json({ err: err });
    res.json( result );
  });
});

Or to only update the changed values:

app.put('/posts/:id', function(req, res){
  var changedmodel = {
    id: req.params.id,
    title: req.body.title,
    body: req.body.body
  }; 
  app.models.posts.update( {id: req.params.id}, changedmodel, function(err, result){
    if(err) return res.status(500).json({ err: err });
    res.json( result );
  });
});

Upvotes: 1

Related Questions