knockout.js绑定更新问题

下面的简单示例重新排列表单上的字段。每次你点击一行旁边的“顶部”按钮，它都会将它移动到列表顶部。这些按钮似乎以几种奇怪的方式发挥作用，但为了争辩起见，我会描述一个按钮。从底部开始点击每个按钮。你会发现console.log表明field.order总是一个，但是到达最后两个时，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部分的属性绑定应该是： – 2012-04-20 19:38:44

其实在这个例子中你不需要括号。如果您使用某些逻辑（如'order（）> 3'），则只需使用括号 – 2012-04-20 23:00:51

knockout.js绑定更新问题

回答

相关问题