계산 된 관측 가능 UI 업데이트 중

Question

내 녹아웃 웹에서 계산 된 변수에 문제가 있습니다. 여기에 내 코드입니다 :

function ViewModel() { 
    var self = this; 
    self.seatsRaw = ko.observableArray([]); 
    self.selectedSeatId = ko.observable(); 
    self.session = ko.observable(); 
    self.seats = ko.computed(function(){ 
     var seatsComplete= self.seatsRaw().slice(0); 
     for (var i = 0; i < seatsComplete.length; i++) { 
      if (self.selectedSeatId()) { 
       seatsComplete[i].selected = seatsComplete[i].id == self.selectedSeatId(); 
      } else if (self.session() && Number(self.session().seat) > 0) { 
       seatsComplete[i].selected = seatsComplete[i].id == self.sesion().seat; 
      } else { 
       seatsComplete[i].selected = false; 
      } 
     } 
     return seatsComplete; 
    }); 
    self.selectSeat = function(data,event) { 
    self.selectedSeatId($(this).id); 
    }; 
} 

그래서, 난 그냥 좌석 배열을 받고 나는 "선택"과 UI에 표시 할 배열의 각 객체에 필드를 추가 할 수 있습니다.

세션에 대한 정보를 아약스에서 읽고 원시 상태로 설정하고 업데이트 할 때 UI에 변경 사항이 표시되지 않습니다.

왜 그런가요? 그런 다음 UI를 업데이트하려면 어떻게해야합니까?

감사합니다.

편집

<ul class="seats" data-bind="foreach: seats"> 
     <li data-bind="css: {selected: selected, 'non-selected': !selected}, click: $root.selectSeat"> 
     <a href="#" data-bind="attr: {id: id}"> 
      <img data-bind="attr: {src: baseUrl + 'img/seats/' + image}" /> 
      <p data-bind="text: name"></p> 
     </a> 
     </li> 
</ul> 

좌석은 뷰 모델 아니지만 ...이되어야 하는가?

Answer 1

추가 컨텍스트를 제공해 주셔서 감사합니다. 내가 코멘트에서 의미했던 것을 조금 더 설명하려고 노력할 것이다.

좌석은 ViewModel이 아니어야합니까?

당신이를 만들 때 :

Seat 그냥 일반 객체에도

, 그것은 여기에 (지금까지 내가 말할 수있는) 코드에서 무슨 일이 일어나고 있는지의 ... 또한 종류의 뷰 모델입니다 귀하의 계산에 새로운 배열, 으로 가득 채워진 이전 배열은과 동일한 개체입니다. 녹아웃 렌더러는 목록 항목을 다시 렌더링해야하는 이유를 알지 못합니다.

이 예제를 확인하십시오. 로그에서 "올바르게 작동하는"모든 것을 볼 수 있지만 녹아웃은 업데이트되지 않습니다. 이 예제 다음에 우리가 selected을 관찰 할 수 있다면 어떻게되는지 보여줄 것입니다. 관찰 특성을 가진

이제

var seats =[ 
 
    { id: 1, selected: false }, 
 
    { id: 2, selected: true }, 
 
    { id: 3, selected: false } 
 
]; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    this.rawSeats = ko.observableArray(seats); 
 
    
 
    this.selectedSeatId = ko.observable(2); 
 
    this.selectSeat = function(data, event) { 
 
    self.selectedSeatId(data.id) 
 
    } 
 
    
 
    this.seats = ko.computed(function() { 
 
    var selectedId = self.selectedSeatId(); 
 
    self.rawSeats().forEach(function(seat) { 
 
     seat.selected = seat.id === selectedId; 
 
    }) 
 
    
 
    console.log(self.rawSeats()); 
 
    return self.rawSeats(); 
 
    
 
    }); 
 
    
 
    } 
 

 
ko.applyBindings(new ViewModel());

.selected { background: yellow }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<ul data-bind="foreach: seats"> 
 
    <li data-bind="css: { selected: selected }, 
 
       text: id, 
 
       click: $root.selectSeat"></li> 
 
</ul>

:

var seats =[ 
 
    { id: 1, selected: ko.observable(false) }, 
 
    { id: 2, selected: ko.observable(true) }, 
 
    { id: 3, selected: ko.observable(false) } 
 
]; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    this.rawSeats = ko.observableArray(seats); 
 
    
 
    this.selectedSeatId = ko.observable(2); 
 
    this.selectSeat = function(data, event) { 
 
    self.selectedSeatId(data.id) 
 
    } 
 
    
 
    this.seats = ko.computed(function() { 
 
    var selectedId = self.selectedSeatId(); 
 
    self.rawSeats().forEach(function(seat) { 
 
     seat.selected(seat.id === selectedId); 
 
    }) 
 
    
 
    return self.rawSeats(); 
 
    
 
    }); 
 
    
 
    } 
 

 
ko.applyBindings(new ViewModel());

.selected { background: yellow }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<ul data-bind="foreach: seats"> 
 
    <li data-bind="css: { selected: selected }, 
 
       text: id, 
 
       click: $root.selectSeat"></li> 
 
</ul>