0

我正在尝试使用用于编辑用户详细信息的对话框来构建用户网格功能。这是我的 HTML：

<!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/编辑

4

3 回答 3

1

Knockout 挂钩到输入框上的事件，以便在焦点到达按钮之前更新视图模型。因此，你在 validate 函数中放了什么并不重要——为时已晚！但你可能已经想通了...

我建议查看 Knockout 的第三方插件之一，它可以帮助您进行验证或延迟更新：

于 2012-12-10T13:39:25.403 回答
0

利用writeable 计算 observable，并将您的验证放在 write 函数中。

例如：

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-10T13:29:09.723 回答
0

感谢所有试图提供帮助的人，看来我有自己的解决方案......这对我有好处，因为通过这种方式，在单击“保存”按钮并通过验证之前，网格中已编辑的用户详细信息无法更改：这是我的解决方案：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-10T22:24:04.007 回答