骨干視圖偵聽模型事件

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不會綁定到任何Coupon事件，因此，如果Coupon調度一個事件，則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調用返回數據之前將優惠券添加到購物車中。

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

或者，您可以執行不帶回調的fetch（）並偵聽“ change”事件，就像我先前在＃2中提到的那樣。

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