backbone view listens to model event

Question

im having problem with backbone view-model communication, view should be listening events from model, so function couponReader is suppossed to get the data from model and add to the cart after a sort of confirmation. Any help is appreciated

define([
'jquery',
'underscore',
'backbone',
'text!templates/menu/menu.html',
'text!templates/menu/cartItem.html',
'collections/cart',
'views/menu/topBar',
'models/coupon',
'swipe'

], 
function ($, _, Backbone, menuTemplate, cartItemTemplate, Cart, TopBarView, Coupon)  {

var slider;
var sliderPosition = 0;
var top;

var menuView = Backbone.View.extend({
    el:$("body"),

    events:{
        "click #keno50":"addKeno50",

    },

    initialize:function () {

        this.couponReader();
    },

    render:function () {
        this.el.html(menuTemplate);
        // TODO - Memory leak here :O
        new TopBarView({ el: this.$('#topBar') }).render();
        this.slider = new Swipe(document.getElementById('slider'), {startSlide:sliderPosition});
        this.resizeScreen();
        return this;
    },

    couponReader:function () {
        var coupon = new Coupon({   //problem here
            name: Coupon.getCoupon().name,
            price: Coupon.getCoupon().price
        });
        Cart.add(coupon);
    },


    addKeno50:function () {
        var keno50 = {
            name:"Keno",
            price:50
        }
        Cart.add(keno50);
        sliderPosition = this.slider.getPos();
        this.render();
    }

});
return new menuView;
});

model class: it listens to the server in loop, get data from server whenever a data is loaded.

define(['jquery', 'underscore', 'backbone'],
function ($,_, Backbone) {
    var Coupon = Backbone.Model.extend({
        initialize:function () {
           this.getCoupon(); //console.log("funkar*?");
        },
   getCoupon : function() {
        var XHR = this.getRequest();
    XHR.done(function(data){
        var keno10 = {
            name: data.description,
            price: parseInt(data.price)}

        var price = parseInt(data.price);
        var name = data.description;
        var status = data.ok;
    })
    },

    getRequest:function() {
        var fn = arguments.callee;
        var XHR = $.ajax({
            url: '/nextdocument',
            type: 'GET',
            async: true,
            cache: false,
            timeout: 11000, //vänta på svar från servern om ingen inläsning
            success:function(data) {
                var name = data.description;
                var price = data.price;
                console.log("read--> " + name + price);
                setTimeout(fn, 1000);
                if (data.ok == "true") {
                    data["ok"] = data.ok;
                    $.ajax(
                        {
                            url: "/customerdone",
                            data: JSON.stringify(data),
                            processData: false,
                            type: 'POST',
                            contentType: 'application/json'
                        }
                    )
                }else{
                    //no document if no read in
                    console.log("error--> " + data.errorMessage)
                }
            }
        })
        return XHR;
    }

    });
    return Coupon;
});

Answer 1

I see a couple of issues with your example.

1. menuView doesn't bind to any Coupon events, so if Coupon were to dispatch an event, menuView wouldn't know about it.

2. You can specific a URL for your model and let Backbone get the data using fetch() rather than adding your own Ajax call to get data.

    initialize: function () { this.coupon = new Coupon(); this.coupon.bind('change', this.couponCreated, this); this.coupon.fetch(); }, couponCreated: function () { Cart.add(this.coupon); } 

3. It looks like you are making 3 ajax calls to get the same data. For example in menuView.couponReader() you do new Coupon() and Coupon.getCoupon() twice. Each one of these makes a new Ajax call the way you have it configured.

It was hard to infer what you were trying to do in your example. It looks like you are trying to fetch a new Coupon on creation of the menuView and add it to the Cart. If that's the case, consider looking into the URL/fetch() method I was talking about earlier. You won't need to listen for events because you could handle it with a callback. In fact the problems you are having are likely asynchronous issues where you are adding the Coupon to the Cart before the Ajax call has come back with data.

    couponReader: function () {
      var self = this
        , coupon = new Coupon();
      coupon.fetch({success: function (model, response) {
        Cart.add(model);
      });
    }

Alternatively, you can do a fetch() without a callback and listen for the 'change' event instead like I mentioned earlier in #2.

Note: both of these examples rely on using Backbone's mechanism of synchronizing data using the Model's url property.