knockout.jsバインディング更新の問題

フォームのフィールドを並べ替える以下の単純な例です。行の横にある「トップ」ボタンを押すたびに、リストの先頭に移動する必要があります。ボタンはいくつかの奇妙な方法で動作するようですが、議論のためにボタンを説明します。一番下のボタンをクリックして各ボタンをクリックします。 console.logはfield.orderが常に1であることを示していますが、最後の2つの時刻までにUIがあまり一致しないことを示しています。テキストボックスに「10」と「20」のまま残っていますが、それらは間違っていますが、その順序は正しく切り替わります。knockout.jsバインディング更新の問題

これはコバグですか、何か逃しましたか？

注：コードを直接コピーしてhtmlファイルに貼り付けて実行することができます。

<html> 
<head> 
<script src="http://knockoutjs.com/js/knockout-2.0.0.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    function Field(name, order) 
    { 
     this.name = name; 
     this.order = order; 
    } 

    function Form() { 
     this.name = ko.observable("Test"); 
     this.fields = ko.observableArray(); 

     this.fields.push(new Field("field a", 10)); 
     this.fields.push(new Field("field b", 20)); 
     this.fields.push(new Field("field c", 30)); 
     this.fields.push(new Field("field d", 40)); 
     this.fields.push(new Field("field e", 50)); 
     this.fields.push(new Field("field f", 60)); 
    } 

    function AppViewModel() { 
     var self = this; 
     self.selectedForm = ko.observable(new Form()); 

     reorderItems = function() { 
      self.selectedForm().fields.sort(
      function (left, right) { 
       return (left.order == right.order) 
        ? 0 : ((left.order < right.order) ? -1 : 1) 
      }); 
     } 

     fieldMove = function (field) { 
      // find field in parent 
      var fldIdx = self.selectedForm().fields().indexOf(field); 

      field.order = 1; 
      console.log(field.order); 
      field.name = field.name + field.order; 

      // re-order the items 
      reorderItems(); 
     } 
    } 

    $(document).ready(function() { 
     // Activates knockout.js 
     ko.applyBindings(new AppViewModel()); 
    }); 
</script> 
</head> 
<body> 
    <div class="form" data-bind="with: selectedForm"> 
    <!-- ko foreach: fields --> 
    <div class="field"> 
     <span data-bind="html: name"></span> 
     <input data-bind="value: order"></input> 
     <button data-bind="click: fieldMove">Top</button> 
    </div> 
    <!-- /ko --> 
</div> 
</body>

出典

2012-04-20 Mr Grok

私はあなたが問題を抱えた正確な理由はわからないが、私は、観察可能な特性でnameとorderの標準プロパティを置き換えることで、この作業を取得するために管理しました。

このworking fiddleが解決

出典

2012-04-20 14:56:57

ああを実証し、私は私が（http://knockoutjs.com/documentation/observableArrays.html）それらが観測行われていなかったことを逃しました。私は今、なぜそれがまったく効果があるのか、より混乱しています。参照のために、技術的には、フィードのhtml部分のプロパティバインディングは、 –

実際には、この例では角括弧は必要ありません。 'order（）> 3'などのロジックを使用している場合は、角括弧を使用する必要があります。 –

knockout.jsバインディング更新の問題

答えて

関連する問題