유효성 검사 후에 만 ViewModel을 업데이트하는 방법

사용자 정보를 편집하기위한 대화 상자로 사용자 그리드 기능을 구축하려고합니다.유효성 검사 후에 만 ViewModel을 업데이트하는 방법

var userVM=function(nm){ 
    this.firstname=ko.observable(nm); 
    this.EditUser=function(u){ 
    selectedUser(u); 
    $("#dialog").dialog(); 
} 
}; 
var users=ko.observableArray([new userVM('Sholmo'),new userVM('Ahmed')]) ; 

var selectedUser=ko.observable(); 
var validate=function(){ 
if($('[name="firstname"]').val()==''){ 

alert('must enter name'); 
//how prevent model updating? 
} 
} 

ko.applyBindings();

내 문제는 내가 단지 후에 사용자 정보를 업데이트, (버튼을 클릭하고 검증이 전달된다 "저장"할 것입니다 : 여기

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout- 2.1.0.js"></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel ="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"> </script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
users:<hr/> 
    <div data-bind="foreach:users"> 
    <div><span data-bind="text:firstname"></span>&nbsp;<a href="#" data- bind="click:EditUser">edit</a></div><hr> 
    </div> 

    <div id="dialog" style="display:none" data-bind="with:selectedUser"> 
     <input type="text" data-bind="value:firstname" name="firstname"/> 
    <button data-bind="click:validate">save</button> 
</div> 
</body> 
</html>

내 JS입니다 : 여기 내 HTML입니다 입력 된 텍스트가 변경된 후 사용자 이름이 즉시 업데이트되었습니다.) 여기에 jsbin : http://jsbin.com/epocov/1/edit

출처

2012-12-10 happyZZR1400

이 링크되어 있습니다. writeable computed observable을 사용하고 쓰기 기능. 예를 들어

: 입력 상자에 이벤트에

function MyViewModel() { 
    this.firstName = ko.observable('Planet'); 
    this.lastName = ko.observable('Earth'); 

    this.fullName = ko.computed({ 
     read: function() { 
      return this.firstName() + " " + this.lastName(); 
     }, 
     write: function (value) { 
      //**Validate here** 
      var lastSpacePos = value.lastIndexOf(" "); 
      if (lastSpacePos > 0) { // Ignore values with no space character 
       this.firstName(value.substring(0, lastSpacePos)); // Update "firstName" 
       this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName" 
      } 
     }, 
     owner: this 
    }); 
}

출처

2012-12-10 13:29:09 MichaelS

고마워,하지만 어떤 이유에서 나는 계산 된 {read : wirte :}를 매개 변수로 넣으려고 할 때 컴파일 오류가 계속 발생하며 그 이유가 KO 버전 일 수 있습니까? – happyZZR1400

@ happyZZR1400 : 네, 그럴 수도 있습니다. 계산은 비교적 새로운 것입니다. 이전 버전을 사용하고 있습니까? – MichaelS

녹아웃 후크 초점이 이제까지 버튼에 도달하기 전에 뷰 모델이 업데이트 될 수 있도록. 따라서, 당신이 validate 함수에 넣은 것은 중요하지 않습니다 - 너무 늦었습니다! 하지만 당신은 아마 이미 ... 그 알아 냈

내가 검증, 지연 업데이트와 함께 당신을 도울 수있는 한방을 타사 플러그인 중 하나보고하는 것이 좋습니다 것입니다 :

녹아웃 검증 - https://github.com/ericmbarnard/Knockout-Validation
이연 업데이트 -하기 위해 노력하는 모든 사람에 https://github.com/mbest/knockout-deferred-updates

출처

2012-12-10 13:39:25 CodeThug

이 유용한 플러그인 덕분에 ...하지만! 내가 이해하는 것처럼, thosse 유효성 검사는 변경되는 그리드의 사용자 세부 사항을 막지 못합니다 (저장 버튼을 누른 후 유효성 검사가 통과 될 때까지 피해야합니다). 다시 한 번 감사드립니다 - 다른 플러그인에 해당 플러그인을 사용합니다 – happyZZR1400

덕분에,이 때문에이 방법으로 편집 된 사용 나를 위해 좋은 .. 난 내 자신의 솔루션을 온 것 같다 JS : 여기 내 솔루션입니다 : 버튼을 클릭하고 유효성 검사 통과 "저장"할 때까지 R 그리드의 세부 사항은 변경할 수 없습니다

ko.bindingHandlers.updateWhenValid = { 

     init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    $(element).val(ko.utils.unwrapObservable(valueAccessor())); 
     }, 
     update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var value = valueAccessor(); 
      var valueUnwrapped = ko.utils.unwrapObservable(value); 
      $('button').click(function(){ 
      if($(element).val()!=''){ 
       value($(element).val()); 
       $("#dialog").dialog('close'); 
      } 
      else{ 
      value(valueUnwrapped); 
      } 
      }); 
     } 
    }; 

    var userVM=function(nm){ 
    var self=this; 

     this.firstname= ko.observable(nm); 

     this.EditUser=function(u){ 


     selectedUser(u); 
     $("#dialog").dialog(); 
     }; 


    }; 
    var users=ko.observableArray([new userVM('Shlomo'),new userVM('Ahmed')]) ; 

    var selectedUser=ko.observable(); 



    ko.applyBindings();

HTML :

users:<hr/> 
<div data-bind="foreach:users"> 
    <div><span data-bind="text:firstname"></span>&nbsp;<a href="#" data-bind="click:EditUser">edit</a></div> 
    <hr> 
</div> 


<div id="dialog" style="display:none" data-bind="with:selectedUser"> 

    <input type="text" data-bind="updateWhenValid:firstname" /> 



<button >save</button> 

</div>

이 방법은 원래의 값 (즉이었다

http://jsbin.com/epocov/9/edit

,536 : 대화 열)이 경우 검증에 남아 전에 여기
당신이 작업 데모를 볼 수 있습니다 실패

출처

2012-12-10 22:24:04 happyZZR1400

유효성 검사 후에 만 ​​ViewModel을 업데이트하는 방법

답변

관련 문제

유효성 검사 후에 만 ViewModel을 업데이트하는 방법