recipeSearchView.js

Jump To … +

app.js autocompleteSearch.js foodSearch.js nutritionTracker.js recipeSearch.js autocomplete.js food.js nutrition.js recipe.js namespace.js router.js templates.js foodSearchView.js nutritionEditorView.js nutritionTrackerView.js nutritionView.js recipeSearchView.js startView.js tabView.js

recipeSearchView.js

/** Recipe View
 * @namespace  nt.Views
 * @class nt.Views.Recipe
 * @memberof! <global>
 * @extends Backbone.View */
nt.Views.Recipe = Backbone.View.extend(/** @lends nt.Views.Recipe# */{

    el: '#search',

    recipeTemplate: Handlebars.Templates.recipe,

    events: {
        'click #recipe-open': 'openRecipes',
        'click #recipe-close': 'closeRecipes'
    },

    /** Setup `this` context and DOM references */
    initialize: function() {
        _.bindAll(this, 'recipeSuccess', 'recipeError');
        this.$searchTop = $('#search-top');
        this.$searchResults = $('#search-results');
        this.$recipeTop = $('#recipe-top');
        this.$recipeResults = $('#recipe-results');
        this.$recipeResults.html(nt.preloader);

    }, // initialize

    /** Render results */
    render: function() {

¶

Clear out old results
```
        this.$recipeResults.html('');
```

Populate recipe template with the recipe attributes

        this.$recipeResults.append( this.recipeTemplate({recipes: this.collection.toJSON()}) );

        return this;

    }, // render

    /** AJAX success callback */
    recipeSuccess: function(collection, response) {
        this.render();
    }, // recipeSuccess

    /** AJAX error callback */
    recipeError: function(collection, errorResponse) {
        var status = errorResponse.status;
        var statusText = errorResponse.statusText;
        var msg = '<div class="alert alert-danger">Edamam recipe request failed with error: <br>' +
                   status + ' : ' + statusText + '</div>';
        this.$recipeResults.html(msg);

    }, // recipeError

    /** Get Edamam recipes */
    getRecipes: function(q) {

Edamam API https://developer.edamam.com/recipe-docs

        var parameters = {
            'q': q,
            'app_id': '109142f6',
            'app_key': '21467cc06c5f05e55b19271dcc457914',
            'to': '5' // return 5 results
        };

¶

Clear out all the models in the collection
```
        this.collection.reset();
```

Make JSONP request to Edamam

        this.collection.fetch({
            data: $.param(parameters),
            success: this.recipeSuccess,
            error: this.recipeError
        });

    }, // getRecipes

    /** Hide search view and show recipe view */
    openRecipes: function() {
        var food = $('#search-food').val();

        this.getRecipes(food);
        this.$searchTop.hide();
        this.$searchResults.hide();
        this.$recipeTop.show();
        this.$recipeResults.show();

    }, // openRecipes

    /** Hide recipe view and show search view */
    closeRecipes: function() {
        this.$recipeResults.html('');
        this.$recipeTop.hide();
        this.$searchTop.show();
        this.$recipeResults.hide();
        this.$searchResults.show();

    } // closeRecipes

});