Question

我有以下代码呈现按钮并具有三种状态。初始状态，加载状态和成功/失败状态。

在下面的代码中，我有以下视图，它呈现一个按钮并模拟一个ajax调用。当进行“ajax”调用时，我希望按钮显示消息加载，它会执行。但是一旦它在3秒后超时，我希望按钮显示“勾号”符号并发送消息。

我该如何完成？我在3秒后setTimeout返回时无法插入功能。

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>

骨干视图：

$(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();

});

Answer 1

知道了！。

我所要做的只是替换

if (this._parent.onSuccess() === true)

在我的onSuccess函数

中

if (this._parent.onSuccess)

它有效！

模拟Ajax调用

1 个答案: