Магистральный вид прослушивает модельное событие

Question

У меня возникла проблема с коммуникацией с моделью на основе магистрали, представление должно прослушивать события от модели, поэтому функция couponReader предполагает получение данных из модели и добавление в корзину после своего рода подтверждения. Любая помощь приветствуется

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; 
}); 

класс модели: прислушивается к серверу в цикле, получить данные с сервера каждый раз, когда данные загружаются.

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

Я вижу пару вопросов с вашим примером.

1. menuView не связывается с любым купоном событий, так что если Купонный были направить событие, menuView не будет знать об этом.

2. Вы можете указать URL-адрес своей модели и позволить Backbone получать данные с помощью функции fetch() вместо добавления собственного вызова Ajax для получения данных.

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

3. Похоже, вы делаете 3 вызова ajax для получения одинаковых данных. Например, в menuView.couponReader() вы делаете новые купоны() и Coupon.getCoupon() дважды. Каждый из них делает новый вызов Ajax так, как вы его настроили.

Было сложно определить, что вы пытались сделать в своем примере. Похоже, вы пытаетесь извлечь новый купон на создание menuView и добавить его в корзину. Если это так, подумайте о методе URL/fetch(), о котором я говорил раньше. Вам не нужно будет слушать события, потому что вы можете справиться с обратным вызовом. На самом деле проблемы, с которыми вы сталкиваетесь, скорее всего, асинхронные проблемы, когда вы добавляете купон в корзину, прежде чем вызов Ajax вернется с данными.

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

В качестве альтернативы, вы можете сделать выборку() без обратного вызова и слушать для «изменения» события вместо того, чтобы, как я уже упоминал ранее в # 2.

Примечание: оба этих примера основаны на использовании механизма синхронизации данных с базой данных с использованием свойства URL-адреса модели.