2016-04-05 2 views
0

Я хочу, чтобы вычисленный был обновлен при обновлении наблюдаемого массива. Массив заполнен вопросами и ответами (Да или Нет). Когда пользователь меняет ответ на вопрос, я хочу, чтобы какой-то регион был видимым или нет.Knockoutjs вычислено не обновлено с помощью наблюдаемогоArray

Значит, вычисленный is5B должен быть правдой, если на вопрос ответили "oui", и это должно сделать видимыми участки.

is5B вычислен вычисляется только при инициализации и не срабатывает, когда массив обновляется (она обновляется, я проверил с точки останова)

Вот вид модели:

var section5Model = ko.validatedObservable({ 
    Questions5A: ko.observableArray(GetQuestions('5A')), 
    Questions5B: ko.observableArray(), 
    Questions5C: ko.observableArray(), 
    ContactAQ: ko.observable(), 
    Date: ko.observable(''), 
    Heure: ko.observable(''), 
    CategorisePar: ko.observable(''), 
    DateCategorise: ko.observable(''), 
    RepOuiNon: [{ label: 'Oui', value: 0 }, { label: 'Non', value: 1 }] 
}); 

section5Model().is5B = ko.computed(function() { 
    this.Questions5A().forEach(function (item) { 
     if (item.reponse == 'Oui') { 
      return true; 
     } 
    }); 
}, section5Model()); 

Вот разметка:

<div id="sectionContainer"> 
    <div id='S5FormBlock1' class="formSection5"> 
     <div id="QSection5A" data-bind="foreach: Questions5A"> 
      <div class='mockTable'> 
       <div class="column200 centerLabel"><span data-bind="text: Texte"></span></div> 
       <div class="grayRoundBorder padR10" data-bind="foreach: $parent.RepOuiNon"> 
        <input type="radio" data-bind="value: label, attr : {name: $parent.ID}, checked: $parent.reponse" /><span data-bind="text: label"></span> 
       </div> 
      </div> 
      <p /> 
     </div> 
     <div data-bind="visible: is5B">Il s'agit d'une plainte qualité</div> 
     <div id="QSection5B" data-bind="visible: is5B,foreach: Questions5B"> 
      <div class='mockTable'> 
       <div class="column200 centerLabel"><span data-bind="text: Texte"></span></div> 
       <div class="grayRoundBorder padR10" data-bind="foreach: $parent.RepOuiNon"> 
        <input type="radio" data-bind="value: label, attr : {name: $parent.ID}, checked: $parent.reponse" /><span data-bind="text: label"></span> 
       </div> 
      </div> 
      <p /> 
     </div> 
     <div data-bind="visible: is5C">Il s'agit d'une plainte d'insatisfaction</div> 
     <div id="QSection5C" data-bind="visible: is5C,foreach: Questions5C"> 
      <div class='mockTable'> 
       <div class="column200 centerLabel"><span data-bind="text: Texte"></span></div> 
       <div class="grayRoundBorder padR10" data-bind="foreach: $parent.RepOuiNon"> 
        <input type="radio" data-bind="value: label, attr : {name: $parent.ID}, checked: $parent.reponse" /><span data-bind="text: label"></span> 
       </div> 
      </div> 
      <p /> 
     </div> 
    </div> 
</div> 
+0

Кстати, у вас есть много дублирования в представлении. Подумайте об использовании [шаблонов] (http://knockoutjs.com/documentation/template-binding.html). – Tomalak

ответ

2

проблема, что у вас есть то, что item.response не наблюдается. Поэтому, если это изменит, KnockoutJS не знает об этом. Чтобы исправить это, вы должны изменить, что наблюдаемая

section5Model().is5B = ko.computed(function() { 
    this.Questions5A().forEach(function (item) { 
     if (item.reponse() == 'Oui') { 
      return true; 
     } 
    }); 
}, section5Model()); 
+0

Спасибо, это было частью ответа, и ответ «Ну, доброжелатель» завершил решение! –

0

компьютерной функции, которые зависят от одного или нескольких других наблюдаемых, и будет автоматически обновляться каждый раз, когда какой-либо из этих зависимостей изменяется. поэтому в вашем случае не наблюдаются внутри вашей вычислительной функции. поэтому сделайте по крайней мере одну переменную в стороне, вычисленную как наблюдаемую. в вашем случае, пожалуйста, сделайте item.response в качестве наблюдаемого. для этого вам необходимо вернуть наблюдаемую переменную на GetQuestions('5A')

Пожалуйста делать Questions5A observableArray, как как

var section5Model = ko.validatedObservable({ 
     Questions5A: ko.observableArray([ 
       {reponse : ko.observable('reponse 1 ') }, 
       {reponse : ko.observable('reponse 2') }, 
       /* other objects */ 
     ]),  
     /* other code */ 
+0

Спасибо, это и ответ Slawomir завершил решение! –

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