2014-10-09 3 views
2

У меня возникла проблема с введенным флажком в моем коде нокаута, который правильно обновляет модель просмотра, но не обновляется до тех пор, пока окружающая его область не исчезнет и не появится снова. В настоящее время мы используем Knockout 3.2.0.Нокаут флажок не обновляется визуально

Вот подмножество соответствующего HTML:

<!-- ko foreach: objects --> 
<!-- ko if: isType(typeCodes.INPUT) --> 
<!-- ko if: selected --> 
<div data-bind="fadeVisible: $root.isState(uiState.IDLE)" id="typeInputContainer"> 
    <!-- ko foreach: $root.types --> 
     <div class="checkbox patientType"> 
      <input type="checkbox" data-bind="attr: {id: 'checkPt' + $data.patientTypeValue() }, checked: $data.visible" /> 
     </div> 
    <!-- /ko --> 
</div> 
<!-- /ko --> 
<!-- /ko --> 
<!-- /ko --> 

А вот подмножество ViewModel:

function PatientType(name, value, color) { 
    var self = this; 
    self.typeName = ko.observable(name); 
    self.visible = ko.observable(true); 
    //Disposal 
    self.isDisposed = false; 
    self.dispose = function() { 
     self.color().dispose(); 
     self.isDisposed = true; 
    }; 
} 

Извиняюсь за резкого сокращения, но окружающий код в каждом случае весьма многословен и не имеет особого отношения к проблеме.

Когда я перехожу через код на самом высоком уровне в стеке вызовов, функция JQuery для обработки событий (см. Ниже), щелкая по этому флажку, вызовет это примерно пять или шесть раз, и в каждой точке после во-первых, флажок изменился, чтобы правильно отразить обновленную модель просмотра.

Однако после того, как завершена «нить» выполнения, флажок немедленно возвращается в прежнее состояние. Только при удалении div (путем отмены выделения объекта, указанного в верхней строке HTML) и повторного добавления (путем повторного выбора) флажок корректно отражает модель представления.

Первоначально, я думал, что изменение пользовательского интерфейса было остановлено рядом подписчиков, назначенных различным изменениям, вызванным этим обновлением в модели viewmodel, но я обнаружил, что проблема сохраняется, когда эти подписки были временно удалены. В приложении есть другие флажки, которые функционируют по назначению и написаны почти так же.

JQuery 2.1.1 код, упомянутый выше:

eventHandle = elemData.handle = function(e) { 
    // Discard the second event of a jQuery.event.trigger() and 
    // when an event is called after a page has unloaded 
    return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ? 
     jQuery.event.dispatch.apply(elem, arguments) : undefined; 
    }; 

И определение fadeVisible связывания, в случае, если оно соответствует:

ko.bindingHandlers.fadeVisible = { 
    init: function (element, valueAccessor) { 
     // Initially set the element to be instantly visible/hidden depending on the value 
     var value = valueAccessor(); 
     $(element).toggle(ko.unwrap(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable 
    }, 
    update: function (element, valueAccessor) { 
     // Whenever the value subsequently changes, slowly fade the element in or out 
     var value = valueAccessor(); 
     ko.unwrap(value) ? $(element).fadeIn() : $(element).fadeOut(); 
    } 
}; 

Любые предложения о том, что может быть причиной этого будет очень признателен.

+0

Куда деется 'fadeVisible' div? Что контролирует выбор/отмена выбора. [Моя скрипка] (http://jsfiddle.net/mjbzc3tm/). – Origineil

+0

Какая версия нокаута? –

+0

Возможно ли предоставить jsfiddle, который демонстрирует проблему? –

ответ

0

Не знаю, это относится к делу, но у меня возникла проблема, когда переключатель радиосвязи не был выбран после перемотки. Исправлено, как только я заменил data-bind = "if: with data-bind =" visible:

+0

Итак, это действительно усугубило ситуацию, но интересным образом. Создание внешнего div видимым, если оно выбрано, т. Е. Означает, что оно всегда существует в какой-либо форме, означает, что этот флажок никогда не подвергается повторной оценке, и этот флажок изменяется, когда другой тип пациента добавляется или удаляется. Я изучаю код для каждого из этих действий только сейчас, чтобы увидеть, как они подсказывают это изменение. Спасибо! –

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