バックボーンビューは、モデル

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を特定して、独自のAjax呼び出しを追加してデータを取得するのではなく、fetch（）を使用してBackboneにデータを取得させることができます。

   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（）とCoupon.getCoupon（）を2回実行します。これらのそれぞれは、あなたが設定した方法で新しいAjax呼び出しを行います。

あなたの例でやろうとしていたことを推測するのは難しいです。 menuViewの作成時に新しいクーポンを取得してカートに追加しようとしているようです。その場合は、私が先に話していたURL/fetch（）メソッドを調べることを検討してください。コールバックで処理できるので、イベントを待機する必要はありません。事実、問題は、Ajaxコールがデータで復活する前にカートにクーポンを追加する非同期の問題です。

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

代わりに、コールバックなし（）フェッチと私は＃2で前述の代わりにLIKE「変更」イベントをリッスン行うことができます。

注：これらの例は両方とも、Modelのurlプロパティを使用してデータを同期するBackboneのメカニズムを使用している必要があります。