knockout.js связать обновление проблемы

Простой пример ниже, который переупорядочивает поля в форме. Каждый раз, когда вы нажимаете кнопку «Вверх» рядом со строкой, она должна перемещать ее в начало списка. Кажется, что кнопки действуют несколько странными способами, но я опишу один из них для аргументации. Начиная с нижней кнопки нажмите каждую кнопку. Вы увидите, что console.log указывает, что field.order всегда один, но пользовательский интерфейс не совсем подходит к моменту, когда вы дойдете до последних двух; они остаются как «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 связать обновление проблемы

ответ

Смежные вопросы