我有一个表单和一个提交按钮。当所有字段都填满后，只会启用提交按钮，否则它将处于禁用状态。我指的是question但是当我实现这个想法时在我的项目中然后它不起作用。即使所有字段都已填满，按钮仍然处于禁用状态。我不知道错误发生在哪里。请帮忙。
这是我的淘汰代码。
self.newPatient = ko.asyncCommand({
execute: function(complete) {
var vm = {
name: ko.observable(""),
password: ko.observable(""),
address: ko.observable(""),
username: ko.observable("")
};
vm.isFormValid = ko.computed(function() {
return this.name() && this.password() && this.address() && this.username();
}, vm);
ko.applyBindings(vm);
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);
}
});
$('.alert-patient-success').show();
self.patients.removeAll();
self.getPatients();
/* $.when(self.patients.push(self.patient()),self.patient(new Patient()),self.dirtyFlag1().reset(),$('#patientTabs a:last').tab('show'))
.always(complete);*/
}
},
canExecute: function(isExecuting) {
return !isExecuting && isDirty() && isValid();
}
});
这是保存按钮代码。
<button class="btn btn-primary"data-bind="command: $root.newPatient, activity: $root.newPatient.isExecuting,enable: $root.newPatient.isFormValid" >
<i class="icon-ok icon-white"></i> Save
</button>
这是表格
<form id="addPatientForm" data-validate="parsley">
<div class="control-group">
<label class="control-label" for="inputIcon">Name :</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: name,valueUpdate: 'keyup'" data-required="true" data-trigger="change" name="name">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Address :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-hand-right"></i></span>
<input class="span8" name="address" type="text" data-bind="value: address,valueUpdate: 'keyup'" data-required="true" data-trigger="change">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Gender :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-hand-right"></i></span>
<select class="span8" name="gender" data-bind="options: $root.genderOptions,value: gender,optionsCaption: 'Select Gender'" data-required="true" data-trigger="change">
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Consultant :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="cus-user_suit"></i></span>
<select class="span8" name="consultant" data-bind="options: $root.doctors,optionsText: function(item){return item.name},optionsValue:function(item){return item.username},selectedOptions: consultant,value:consultant" data-required="true" data-trigger="change">
</select>
</div>
</div>
</div>
<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,valueUpdate: 'keyup'" 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,valueUpdate: 'keyup'" data-required="true" data-trigger="change">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Mobile :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="cus-phone"></i></span>
<input class="span8" type="text" data-bind="value: mobile,valueUpdate: 'keyup'" data-type="number" data-minlength="10"data-required="true" data-trigger="change" data-type="phone" name="mobile">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Email address :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span8" type="text" data-bind="value: email,valueUpdate: 'keyup'" data-required="true" data-trigger="change" data-type="email" name="email">
</div>
</div>
</div>
</form>
答案 0 :(得分：1)
请尝试使用以下代码段。通过使用文件名和文件引用，您可以轻松了解如何为淘汰MVVM创建文件夹/文件结构。
<强>的test.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="Scripts/knockout-3.1.0.js" type="text/javascript"></script>
<script src="ViewModels/testViewModel.js" type="text/javascript"></script>
</head>
<body>
<div>
<input type="text" data-bind="value: EmpNo" />
<input type="text" data-bind="value: EmpName" />
<button data-bind="enable: EmpNo() != '' && EmpName() != '' ">
Submit</button>
</div>
<script type="text/javascript">
ko.applyBindings(new testViewModel());
</script>
</body>
</html>
<强> testViewModel.js
var testViewModel = function () {
this.EmpNo = ko.observable("");
this.EmpName = ko.observable("");
};
如果有任何疑虑，请告诉我。如果可能，则临时创建新文件并进行检查。所以可能会有所了解，它是如何运作的。
答案 1 :(得分：0)
问题是下面的代码片段只会在执行asyncCommand时执行。因此，您最终得到的表单不会与您的问题相关的任何内容绑定。要使其工作，请确保将执行处理程序外部的绑定设置（ko.applyBindings）移动到加载页面时执行的位置。
var vm = {
name: ko.observable(""),
password: ko.observable(""),
address: ko.observable(""),
username: ko.observable("")
};
vm.isFormValid = ko.computed(function() {
return this.name() && this.password() && this.address() && this.username();
}, vm);
ko.applyBindings(vm);