如何仅在验证后更新ViewModel

我正尝试通过编辑用户详细信息的对话框来创建用户网格功能。这里是我的HTML：如何仅在验证后更新ViewModel

<!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：

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();

我的问题是，我想更新用户资料只后“保存”按钮点击，验证通过，（现在的用户名立刻更新后，在输入文本改变）这里是链接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

谢谢，但由于某种原因，当我试图把计算与{读：wirte：}作为参数，我保持编译错误可能是原因是ko版本？ – happyZZR1400

@ happyZZR1400：是的，这可能是原因。计算相对较新。你使用的是旧版本吗？ – MichaelS

淘汰赛挂接到输入框事件，这样之前专注还未获得该按钮的视图模型被更新。因此，您在验证功能中放入什么并不重要 - 这太迟了！但是，你可能已经想通了这一点......

我会建议看第三方插件淘汰赛，可以帮助你确认或推迟更新之一：

淘汰赛验证 - https://github.com/ericmbarnard/Knockout-Validation
延迟的更新 - https://github.com/mbest/knockout-deferred-updates

来源

2012-12-10 13:39:25 CodeThug

感谢这个有用的插件......但！据我所知，thosse验证不能阻止用户的细节被更改的网格（我必须避免，直到保存按钮按下并验证通过）再次感谢 - 我将使用这些插件的其他scenerios – happyZZR1400

感谢所有谁试图帮助，看来我带着我自己的解决方案......这是为我好，因为以这种方式编辑使用[R在网格细节不能改变，直到“保存”按钮，点击并验证通过：这里是我的解决方案： JS：

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

来源

2012-12-10 22:24:04 happyZZR1400

如何仅在验证后更新ViewModel

回答

相关问题