0

我在主干视图模型通信方面遇到问题，视图应该监听来自模型的事件，所以功能 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;
});
4

1 回答 1

0

我看到你的例子有几个问题。

  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() 中，您执行 new 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() 并侦听“更改”事件，而不是像我之前在 #2 中提到的那样。

注意：这两个示例都依赖于使用 Backbone 使用模型的 url 属性同步数据的机制。

于 2012-05-11T05:19:07.160 回答