将数据从节点/猫鼬发送到骨干网； 仅接收JSON对象

Question

I'm fairly new to Node, and very new to Backbone, so I'm sure my problem is a pretty basic one - please bear with me!

I'm trying to return data from a Node route function, and pick it up with Backbone and render it in my view. What's happening is that Node is sending my JSON object back to the page, rather than rendering it using my view.

I was following this tutorial which produces this code , and I know my code isn't the prettiest, but I don't understand what's making the Blogroll app work and what's stopping mine from working!

Any insight would be greatly appreciated!

Here's the code:

In app.js:

app.get('/add', recipeController.getAddRecipe);
app.post('/add', recipeController.postIngredient);
app.delete('/add:id', recipeController.deleteIngredient);
app.put('/add:id', recipeController.putIngredient);

In controllers/recipe.js:

exports.getAddRecipe = function(req, res) {
  console.log("getAddRecipe route entered");
  Ingredient.find(function(err, docs) {
    docs.forEach(function(item) {
      console.log("Received a GET request for _id: " + item._id);
    })
    console.log("Sending docs");
    res.send(docs);
  });
};

In public/js/backbone-models.js:

$(document).ready(function() {
    Backbone.Model.prototype.idAttribute = '_id';

    // Backbone Model
    var Ingredient = Backbone.Model.extend({
        defaults: {
            qty: '',
            item: '',
            unit: '',
            prep: ''
        }
    });

    // Backbone Collection
    var Ingredients = Backbone.Collection.extend({
        url: 'http://localhost:3000/add'
    })

    // instantiate a Collection
    console.log("Creating 'ingredients'...");
    var ingredients = new Ingredients();

    // Backbone View for one ingredient
    var IngredientView = Backbone.View.extend({
        model: new Ingredient(),
        tagName: 'div',
        template: _.template($('.ingredients-list-template'),
        initialize: function() {
            this.template = _.template($('.ingredients-list-template').html());
        },
        events: {
            'dblclick .ingredient.card': 'edit',
            'enter .ingredient.card': 'update', // ingredient.card, *OR* input ?? TO DO
            'escape .ingredient.card': 'cancel', // ingredient.card, *OR* input ?? TO DO
            'click .delete-ingredient': 'delete'
        },
        edit: function() {
            var qty = this.$('.qty').html();
            var item = this.$('.item').html();
            var unit = this.$('.unit').html();
            var prep = this.$('.prep').html();

            this.$('qty').html("<input type='text' class='qty-update' value='" + qty + "'>");
            this.$('item').html("<input type='text' class='item-update' value='" + item + "'>");
            this.$('unit').html("<input type='text' class='unit-update' value='" + unit + "'>");
            this.$('prep').html("<input type='text' class='prep-update' value='" + prep + "'>");
        },
        update: function() {
            this.model.set('qty', $('.qty-update').val());
            this.model.set('item', $('.item-update').val());
            this.model.set('unit', $('.unit-update').val());
            this.model.set('prep', $('.prep-update').val());

            this.model.save(null, {
                success: function(response) {
                    console.log('Successfully UPDATED ingredient with _id: ' + response.toJSON()._id);
                },
                error: function(err) {
                    console.log('Failed to update ingredient!');
                }
            });
        },
        cancel: function() {
            ingredientsView.render();
        },
        delete: function() {
            this.model.destroy({
                success: function(response) {
                    console.log('Successfully DELETED ingredient with _id: ' + response.toJSON()._id);
                },
                error: function(err) {
                    console.log('Failed to delete ingredient!');
                }
            });
        },
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });

    // Backbone View for all ingredients
    var IngredientsView = Backbone.View.extend({
        model: ingredients,
        el: $('.ingredients-inner'),
        initialize: function() {
            var self = this;
            this.model.on('add', this.render, this);
            this.model.on('change', function() {
                setTimeout(function() {
                    self.render();
                }, 30);
            }, this);
            this.model.on('remove', this.render, this);

            this.model.fetch({
                success: function(response) {
                    _.each(response.toJSON(), function(item) {
                        console.log('Successfully GOT ingredient with _id: ' + item._id);
                    })
                },
                error: function() {
                    console.log('Failed to get ingredients!');
                }
            });
        },
        render: function() {
            var self = this;
            this.$el.html('');
            _.each(this.model.toArray(), function(ingredient) {
                self.$el.append((new IngredientView({model: ingredient})).render().$el);
            });
            return this;
        }
    });

    console.log("Creating 'ingredientsView'...");
    var ingredientsView = new IngredientsView();


    console.log("Document ready...");
    $('.add-ingredient').on('click', function() {
        var ingredient = new Ingredient({
            qty: $('.qty-input').val(),
            item: $('.item-input').val(),
            unit: $('.unit-input').val(),
            prep: $('.prep-input').val()
        });
        $('.qty-input').val('');
        $('.item-input').val('');
        $('.unit-input').val('');
        $('.prep-input').val('');
        ingredients.add(ingredient);
        ingredient.save(null, {
            success: function(response) {
                console.log('Successfully SAVED ingredient with _id: ' + response.toJSON()._id);
            },
            error: function() {
                console.log('Failed to save ingredient!');
            }
        })
    });
});

And from views/recipes/add.jade:

extends ../layout

block content
  script(type="text/javascript" src="/js/add.js")
  .page
    .ingredients-pane
      .ingredients-inner.column
      // ingredients form
      .card.ingredient-form
        form#ingredientForm
          .input-field
            input(type='text' class="qty-input" name='qty' id="qty" placeholder="Quantity (e.g. 200)")
          .input-field
            input(type='number' class="item-input" name='qty' id="item" placeholder="Item (e.g. onions)")
          .input-field
            input(type='text' class="unit-input" name='unit' id="unit" placeholder="Unit (e.g. grams)")
          .input-field
            input(type='text' class="prep-input" name='prep' id="prep" placeholder="Prep (e.g. chopped)")

          button(type="button" class="add-ingredient" id="ingredientButton").btn.waves-effect.waves-light Add ingredient

    script(type="text/template" id="ingredients-list-template").
      <div class="ingredient card">
        <span class="qty"><%= qty %></span>
        <span class="item"><%= item %></span>
        <span class="unit"><%= unit %></span>
        <span class="prep"><%= prep %></span>
      </div>

Answer 1

So, I figured it out, and it was a ridiculously stupid thing; it was a routing problem.

I thought I could either do a res.send(myJSONData) or a res.render('myAddView') on /add. What I didn't realise is that I needed both - firstly to render my add view, and then send the JSON data itself - to a different route , ie /api/myThing.

So what I ended up with (in case anyone else gets stuck on the same problem) is:

In app.js:

app.get('/add', recipeController.addRecipe);

app.get('/api/ingredients', recipeController.getIngredients);
app.post('/api/ingredients', recipeController.postIngredient);
app.delete('/api/ingredients:id', recipeController.deleteIngredient);
app.put('/api/ingredients:id', recipeController.putIngredient);

In controllers/recipe.js:

exports.addRecipe = function(req, res) {
  res.render('recipes/add', {
    title : 'Add a new recipe'
  });
};

exports.getIngredients = function(req, res) {
  console.log("getAddRecipe route entered");
  Ingredient.find(function(err, docs) {
    docs.forEach(function(item) {
      console.log("Received a GET request for _id: " + item._id);
    })
    res.send(docs);
  });
};

exports.postIngredient = function(req, res) {
  console.log('Received a POST request:')
  for (var key in req.body) {
    console.log(key + ': ' + req.body[key]);
  }
  var ingredient = new Ingredient(req.body);
  ingredient.save(function(err, doc) {
    res.send(doc);
  });
};

exports.deleteIngredient = function(req, res) {
  console.log('Received a DELETE request for _id: ' + req.params.id);
  Ingredient.remove({_id: req.params.id}, function(err, doc) {
    res.send({_id: req.params.id});
  });
}

exports.putIngredient = function(req, res) {
  console.log('Received an UPDATE request for _id: ' + req.params.id);
  Ingredient.update({_id: req.params.id}, req.body, function(err) {
    res.send({_id: req.params.id});
  });
}

And in my Backbone file, to tell Backbone where to find the JSON data it needs:

// Backbone Collection
var Ingredients = Backbone.Collection.extend({
    url: '/api/ingredients'
})