【问题标题】:How to call a function again and again using knockout如何使用淘汰赛一次又一次地调用函数
【发布时间】:2014-04-18 21:02:15
【问题描述】:

我有这个淘汰码。

self.newPatient = ko.asyncCommand({

     execute: function(complete) {
        var isValid=$('#addPatientForm').parsley( 'validate' );
        if(isValid){
        var patientJson=ko.toJSON(self.patient());
        formdata.append("json",patientJson);
        //self.enableButton(false);
     var imagepath= $.ajax({
                url: projectUrl+"newPatient", 
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    formdata = new FormData();
                    imagepath=res;
                    var length=self.patients().length;
                    var patient=self.patient();
                //  self.enableButton(true);
                }
     });    


     } 
     },
     canExecute: function(isExecuting) {
         return !isExecuting && isDirty() && isValid();
     }
 });

这是我的 html 输入框

<div class="control-group">
            <label class="control-label" for="inputIcon">Username :</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-hand-right"></i></span>
                    <input class="span8" type="text" data-bind="value: username" name="username" data-required="true" data-trigger="change" data-remote="${pageContext.request.contextPath}/isUserNameExists" data-remote-method="GET">
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputIcon">Password :</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-hand-right"></i></span>
                    <input class="span8" type="password" data-bind="value: password" name="password" data-required="true" data-trigger="change">
                </div>
            </div>
        </div>

这是我的按钮

<button class="btn btn-primary"
                                                    data-bind="command: $root.newPatient, activity: $root.newPatient.isExecuting">
                                                    <i class="icon-ok icon-white"></i> Save
                                                </button>

当我按下保存按钮然后执行:function(complete){.....} 被调用并在这个函数内部

var isValid=$('#addPatientForm').parsley( 'validate' );

被调用来检查表单的有效性,如果表单无效,则 isValid 为假,因此不调用 ajax。

我想打电话

 var isValid=$('#addPatientForm').parsley( 'validate' );
        if(isValid){.....} 

当任何输入字段发生更改时。那么任何人都可以建议我怎么做吗?

【问题讨论】:

  • 首先,如果您问我,您可能应该验证视图模型而不是视图。创建一个计算属性,该属性读取并验证其评估器主体中的所有属性。更新属性时总是会调用计算属性。
  • @robert.westerlund 感谢您的建议,但我的视图模型包含很多。所以我认为验证所有视图模型不是最佳做法。
  • 只验证你想要验证的属性。要进行验证,您可以查看Knockout Validation plugin at the Knockout Contrib github page
  • @robert.westerlund 再次感谢,但问题是我们已经在使用 parsley.js 进行验证,所以他们不允许我使用其他插件。
  • 如果您还有其他问题,请将其作为另一个问题写在 stackoverflow 上。如果您觉得它与此问题有关,您可以在此处的 cmets 中添加指向该问题的链接。

标签: javascript jquery knockout.js


【解决方案1】:

您可以编写自己的 bindingHandler:

ko.bindingHandlers.parsley = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var isValid = valueAccessor();
        var $form = $(element).closest('form');
        $(element).change(function() {
            isValid($form.parsley('validate'));
        });
    }
};

在您的 ViewModel 中:

self.isValid = ko.observable(false);

然后:

<form ...>
    <input data-bind="parsley: isValid, ..." />
</form>

http://jsfiddle.net/sjroesink/ksqXx/

编辑

由于无法重现您的错误或发生错误的实际行,我无法为您提供帮助。 尝试使用 Chrome 的开发者工具查看错误发生的位置:

【讨论】:

  • 谢谢你的回答,但你能告诉我我在哪里写 bindingHandler 代码吗?我需要写在self.newPatient=ko.asyncCommand({......})
  • 你可以把它放在任何地方,只要它在ko.applyBindings之前执行。不过,在您的 ViewModel 中不是正确的地方。我会在包括淘汰赛后立即提出。
  • 我在 jsfiddle 添加了一个工作示例。你能在 jsfiddle 中重现你的情况吗?
  • 您使用的代码依赖于第三方脚本。 ko.DirtyFlagko.asyncCommandgithub.com/CodeSeven/KoLite 的一部分,它不包含在您的小提琴中。另外,这与您最初的问题无关。
  • 查看我的编辑,目前我没有足够的信息来帮助您。
【解决方案2】:

您可以使用 observable 的 subscribe 函数来运行代码:

username.subscribe(function () { isValid=$('#addPatientForm').parsley( 'validate' ); }
password.subscribe(function () { isValid=$('#addPatientForm').parsley( 'validate' ); }

评论后更新: 这是我会做的:

<div id='koRoot'>
    <input type='text' data-bind='value: username' />
    <input type='text' data-bind='enable: enableButton,value: password' />
    <input type='button' data-bind='command: newPatient' value='Go!' />
</div>
...

还有js:

    var callNewPatient = function () {
        if (self.awaitingValidation()) self.newPatient.execute();
    }

    this.username.subscribe(callNewPatient);
    this.password.subscribe(callNewPatient);

    this.newPatient = ko.asyncCommand({
        execute: function (complete) {
            self.isValid(self.username() === 'me' && self.password() === 'pass');
            if (self.isValid()) {
                self.awaitingValidation(false);
                alert("Valid!");
            } else {
                self.awaitingValidation(true);
            }
        },
        canExecute: function (isExecuting) {
            return self.isValid();
        }
    });

http://jsfiddle.net/nyothecat/LkaEJ/1/

【讨论】:

  • 感谢您的回答。当我更改任何字段时,canexecute 部分正在执行。例如,我确实喜欢这个canExecute: function(isExecuting) { alert('hi'); return !isExecuting &amp;&amp; isDirty() &amp;&amp; isValid(); },然后当我更改一个字段并按下标签按钮时,然后嗨警报出现
  • @JqueryLearner 好的,那你有什么问题?
  • 当我按下保存按钮时,控件会转到执行部分。现在假设是否缺少某些字段`var isValid=$('#addPatientForm').parsley('validate');` isvalid is错误,因此if 块未执行,保存按钮处于禁用状态。现在,当我填写错过的字段时,我希望再次启用保存按钮。这对我来说不会发生
  • 你能提供任何想法吗?
  • 再次感谢您提供小提琴,但如果我在开始时按开始按钮,小提琴将不起作用。请参阅我运行小提琴并删除所有字段然后单击开始按钮。所以按钮被禁用.现在我填写了字段,所以按钮必须启用。但这不会发生。你能给我一个解决方案吗
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-10-18
  • 2013-05-17
  • 2012-05-01
  • 2012-11-14
  • 1970-01-01
  • 1970-01-01
  • 2013-11-04
相关资源
最近更新 更多