weixin_33713707 2014-10-22 13:18 采纳率: 0%
浏览 9

模拟Ajax呼叫

I have the following code that renders a button and has three states. The initial state, the loading state and the success/failure state.

In the following code I have the following view which renders a button and simulates an ajax call. When the "ajax" call is made I want the button to display the message loading, which it does. But once it times-out after 3 seconds I want the button to display a "tick" symbol and the message sent.

How do I get that done? I'm having trouble inserting the functionality once setTimeout return after 3 seconds.

HTML:

  <!-- Scripts -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
  <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
  <script type="text/javascript" src="views/BaseButtonView.js"></script>

</head>

<body>

    <div id="test-buttons">
        <script type="text/template" id="button-test">
            <div id="test-container">
                <button class="cta-ajax">
                    <p class="srtMsg">send message</p>
                    <p class="fnshMsg" style="display: none">sent</p>
                        <div class="spinner-container" style="display: none">loading</div>
                    <!--    Api call {% include 'HevnlyApiBundle:icons:tick.svg.twig' %} -->
                    <span id="tick" style="display: none"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 -3 24 24" class="icn-tick">
<path fill="#4D4E52" d="M19.4,4.1c-0.2-0.2-0.5-0.2-0.7,0l-9.1,8.8L5.3,8.7c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l4.6,4.5
    l0,0l0,0c0.2,0.2,0.5,0.2,0.7,0l9.4-9.1C19.5,4.5,19.5,4.3,19.4,4.1z"></path>
</svg></span>
                </button>
            </div> 
        </script>
    </div>

</body>
</html>

Backbone view:

$(document).ready(function(){
    var ButtonView = Backbone.View.extend({

        el: $("#test-buttons"),

        template: _.template($("#button-test").html()),

        events: {
            "click #test-container": "sendAjax"
        },

        _parent: null,

        initialize: function(options){  
            console.log("Started!");
            console.log(this.$el);
            this._parent = options.parent;
            this.render();
        },

        render: function() {

                // sets whatever markup as the HTML content of the el DOM element using the $el property
            this.$el.html(this.template()); 
            console.log("rendered");
            return this; // A good convention is to return this at the end of render to enable chained calls.
        },

        removeMsg: function (event) {
            $(this.el).find("p").hide();
            console.log("Hiden");
        },

        addMsg: function (event) {
            $(this.el).find(".fnshMsg").show();
            console.log("Shown");
        },

        addBlur: function (event) {
            this.$el.blur();
        },

        addSpinner : function () {
            console.log("Spinner");
            $(this.el).find(".spinner-container").show();

        },

        sendAjax: function (event) {
            console.log("addMsgSuc");
            this.removeMsg();
            this._parent.onClick();
            this.addSpinner();  
        },

        onSuccess: function() {
            if (this._parent.onSuccess() === true) {
            this.addMsg();
            $(this.el).find("#tick").show();
            console.log("tick added");
            this.addBlur();
            }
        }
    });
     // Ajax simulation class
    var AjaxPretend = Backbone.View.extend({

        _button: null,

        initialize: function(){ 
            this._button = new ButtonView({parent: this});

        },

        onClick: function() {
            setTimeout(_.bind(this.onSuccess, this), 3000);
            console.log("Onclick Ajax");
        },

        onSuccess: function() {
            this._button.onSuccess();
            console.log("Ajax success");
        },

        onFailure: function() {
            this._button.onFailure();
            console.log("Ajax failure");
        }
    })

    var T = new AjaxPretend();

});
  • 写回答

1条回答

      报告相同问题?

      悬赏问题

      • ¥30 如何降低hdfs中datanode的JVM内存用量
      • ¥15 Android URL如何转成视频/音频,可行吗?
      • ¥20 SQL数据查询,子查询
      • ¥15 c++字符串分割问题
      • ¥15 关于#sql#的问题:没有用命令关闭cdc,手动把系统表开启的cdc右键删除了
      • ¥15 vue+uniapp
      • ¥15 android freedom
      • ¥15 使用自定义的类型代替内置类型可行吗
      • ¥15 关于STM32的SPI和ENDAT接口编码器通信的问题
      • ¥15 关于#pdfbox#生成的PDF文件正常,转图片中文乱码的问题,如何解决?