javascript - 实现自定义加载消息 DURANDAL

Question

嗨，我有一个 durandal 应用程序，可以通过 ajax 发送数据，但我不知道如何实现加载指示器，以下是代码:

这是加载数据的 View 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>

这是加载数据的模型登录框.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( View )

<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 绑定(bind)更改为:

"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 的处理。它是一个可观察量，并且可观察量是使用我上面展示的方法进行更新的(记住，它们是函数)。当您以这种方式分配 true 时(this.loading = true)，您将覆盖可观察对象本身并将其转换为不可观察标量。因此，当值稍后更改(从 false 到 true 再到 false)时， View 不会更新。

另请注意，您必须导入 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 不在原型(prototype)上。