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

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

menuView不会绑定任何优惠券事件，因此如果优惠券要发送一个事件，menuView就不会知道它。

您可以为您的模型指定一个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次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属性同步数据的机制。

骨干视图监听模型事件

1 个答案: