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 用のサードパーティ プラグインの 1 つを確認することをお勧めします。

于 2012-12-10T13:39:25.403 に答える
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 に答える
0

書き込み可能な計算オブザーバブルを利用し、検証を書き込み関数に入れます。

例えば：

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 に答える