骨幹視圖監聽模型事件

Question

即時通訊有骨幹視圖模型通訊問題，視圖應該從模型監聽事件​​，所以函數couponReader是suppossed從模型中獲取數據並在確認後添加到購物車。任何幫助表示讚賞

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（）和Coupon.getCoupon（）兩次。它們中的每一個都按照您配置的方式創建新的Ajax調用。

在你的例子中很難推斷出你想要做什麼。它看起來像你試圖獲取一個新的優惠券創建menuView並將其添加到購物車。如果是這樣的話，可以考慮一下我剛纔討論的URL/fetch（）方法。你不需要聽事件，因爲你可以用回調來處理它。實際上，您遇到的問題可能是在Ajax調用返回數據之前將優惠券添加到購物車的異步問題。或者，您可以在沒有回調的情況下執行fetch（），並且像＃2中前面提到的那樣監聽'change'事件。

注意：這兩個示例都依賴於使用Backbone的使用模型的url屬性同步數據的機制。