实施自定义加载消息DURANDAL

Question

嗨，我有一个durandal应用程序，它发送了经过ajax处理的数据，但我不知道如何实现加载指标，这是代码：

这是加载数据的视图loadinbox.html

<div class="modal-content messageBox">
    <div class="modal-header">
        <h3>LOGIN</h3>
    </div>
    <div class="modal-body">
       <h3>Entre com suas credenciais.</h3>
       <form data-bind="submit: ok">
           <input type="text" data-bind="value: login" placeholder="CPF"  class="form-control autofocus" />
           <input type="text" data-bind="value: senha" placeholder="Senha" class="form-control autofocus" />
       </form>
    </div>
    <div data-bind="if: $parent.loading">
        <img src="img/loading.gif"/>
    </div>

    <div class="modal-footer">
        <button class="btn btn-success" data-bind="click: ok, active: $parent.loading">Login</button>
    </div>
</div>

这是加载数据loginBox.js的模型

define(function (require) {
    var dialog = require('plugins/dialog');


    var loading = ko.observable();

    var loginBox = function(){
        this.login = '';
        this.senha = '';
        this.loading = false;
    };


 loginBox.prototype.ok = function () {
     this.loading =true;

     $.ajax({
         type: "post", 
         data: { "LoginForm[cpf]" : this.login, "LoginForm[password]" : this.senha , 'ajax':'login-form' },
         url: localStorage['baseurl']+localStorage['router']+'site/login',
         success: function (data){
             console.log(data);
         },
         error: function (request, status, error){
             console.log(request.status);
             console.log(status);
             console.log(error);
         },
         complete: function (data) {
             alert('hqweuiqhioehqio');
             this.loading =false; 
         }
     });
 };


 loginBox.show = function() {
     return dialog.show(new loginBox());
 };    

 return loginBox;

});

Answer 1

从表面上看，您的方法是合理的，但是您在Durandal中使用模块的方法有些混乱。 例如，您已声明loading两次，一次为标量，一次为可观察。

因此，让我们创建一个实例模块（这意味着我们将返回一个构造函数）：

loginBox.html （查看）

<div class="modal-content messageBox">
    <div class="modal-header">
        <h3>LOGIN</h3>
    </div>
    <div class="modal-body">
        <h3>Entre com suas credenciais.</h3>
        <form data-bind="submit: ok">
           <input type="text" data-bind="value: login" placeholder="CPF"  class="form-control autofocus" />
           <input type="text" data-bind="value: senha" placeholder="Senha" class="form-control autofocus" />
        </form>
    </div>
    <div data-bind="if: $parent.loading()">
        <img src="img/loading.gif"/>
    </div>

    <div class="modal-footer">
        <button class="btn btn-success" data-bind="click: ok, active: $parent.loading()">
            Login
        </button>
    </div>
</div>

请注意，我更改了您if对此绑定：

"if: loading()"

用括号引用loading 。 这将使用提供给可观察对象的默认值立即执行评估，然后在可观察对象发生更改时重新评估。

另外，可能有必要将"click: ok, active: $parent.loading()"更改为click: $parent.ok.bind($parent), active: $parent.loading() 。 输入#ok函数后，使用调试器检查上下文。

关于逻辑的注释：在我看来，模态页脚中的含义是

active: !$parent.loading()

表单加载数据时，确定按钮是否应该真正处于活动状态？

loginBox.js（模块实例方法）

define (
    [
        'plugins/dialog',
        'knockout'
    ],
    function (
        dialog,
        ko) {

        var LoginBox = function () {

            this.login = '';
            this.senha = '';
            this.loading = ko.observable(false);
        };

        LoginBox.prototype.ok = function () {
            var _vm = this;

            this.loading(true);

            $.ajax( {
                type: "post", 
                data: { "LoginForm[cpf]" : this.login, "LoginForm[password]" : this.senha , 'ajax':'login-form' },
                url: localStorage['baseurl']+localStorage['router']+'site/login',
                success: function (data) {
                    console.log(data);
                },
                error: function (request, status, error) {
                    console.log(request.status);
                    console.log(status);
                    console.log(error);
                },
                complete: function (data) {
                    alert('hqweuiqhioehqio');
                    _vm.loading(false);
                }
           });
        };

        LoginBox.prototype.show = function() {
            dialog.show(this);
        };  

        return LoginBox;

    };
);

注意我对this.loading处理。 这是一个可观察的对象，并且可观察对象使用我上面显示的方法进行更新（请记住，它们是function ）。 当以这种方式分配true （ this.loading = true您将覆盖可观察的自身并将其转换为不可观察的标量。 因此，当以后更改值（从false到true到false）时，视图不会更新。

另请注意，您必须导入KnockoutJS。

另一个问题：#complete函数中存在this参考问题。 请注意，我在您的#Ok函数顶部执行此操作：

var _vm = this;  //Some people are inclined to this format: var that = this;

然后，在您的#complete函数中，我这样做：

_vm.loading(false);

在您的#complete函数中使用this函数将引用#complete函数本身，而不是viewModel。 我们必须在#complete函数之外保存this的引用。

还有另一个问题：#show不在原型上。

Answer 2

我在我的App JS文件中使用了一个名为Block UI的实用程序，我使用Global Ajax设置来这样称呼它。 通过这种方式，您只需执行一次，然后每个Ajax调用都会显示您的加载gif并在任何Ajax调用开始和结束时隐藏

HTML：在index.html页面（您的主页）中

  <div id="throbber" style="display:none;">
            <img src="/images/gears.gif" />
        </div>

使用Javascript

$(document).ready(function () {    
        $.blockUI.defaults.css.border = 'none';
        $.blockUI.defaults.css.backgroundColor = 'transparent';
        $.blockUI.defaults.message = $('#throbber');
        $.blockUI.defaults.showOverlay = true;
        $.blockUI.defaults.overlayCSS.backgroundColor = "#fff";

        $(document).ajaxStart(function () {
                $.blockUI();            
        }).ajaxStop(function () {
            $.unblockUI();
        });
    });

CSS：

#throbber{
    border:1px solid #346789;
    padding: 15px;
    background-Color: #fff;
    -moz-border-radius:0.5em;
    border-radius:0.7em;
    opacity:0.8;
    filter:alpha(opacity=80);
    color: #000 ;
    width:133px;
    height:133px;
    left: 50%;
    top: 40%;
    position: fixed;
 }