수정하는 방법 값은

Question

다음 뷰를 고려하시기 바랍니다 fromJSON 바르게. 내가하는 방법을 배우려면 체크 박스를 변경하면, 변경 사항을 반영하도록 unreadCount을 자동으로 업데이트하는 방법입니다. 나는 ko를 사용하여 자동으로이 파일을 제공 할 것이라고 생각했지만, 아마도 템플릿의 체크 박스 데이터 바인딩에서 뭔가를해야 할 필요가 있을까요?

또한 체크 박스를 수정하고 자동으로보기 모델 &을 읽지 않으면, 그 업데이트를 서버 (레일스)에 게시하는 올바른 방법은 무엇입니까? 여기

는 서버에서 예를 JSON 응답입니다 : 체크 박스의 값에 따라 당신이 ( data-bind='click: function() {...}' 내부) click에 기능을 실행할 수처럼

{ 
    "conversationlist": [{ 
     "project_name": "Proj 1", 
     "preview": "xxxxx", 
     "status": "unread", 
     "participants": [{ 
      "image": "XXXXXX" 
     }, { 
      "image": "XXXXXX" 
     }], 
     "conversation_id": 193, 
     "title": "Hi Ho", 
     "time_ago": "1 day", 
     "read": true 
    }, { 
     "project_name": "Proj 2", 
     "preview": "xxxx", 
     "status": "unread", 
     "participants": [{ 
      "image": "XXXXXX" 
     }, { 
      "image": "XXXXXX" 
     }], 
     "conversation_id": 193, 
     "title": "Hi Ho", 
     "time_ago": "1 day", 
     "read": true 
    }, { 
     "project_name": "Proj 3", 
     "preview": "xxxxx", 
     "status": "unread", 
     "participants": [{ 
      "image": "XXXXXX" 
     }, { 
      "image": "XXXXXX" 
     }], 
     "conversation_id": 193, 
     "title": "Hi Ho", 
     "time_ago": "1 day", 
     "read": true 
    }] 
} 

Answer 1

이 보인다 각 항목 증가 또는 읽지 않은 카운터를 감소하는 확인했다. 이렇게하면 currentList을 반복하고 읽지 않은 개수를 그런 식으로 업데이트하지 않아도됩니다.

read 속성을 명시 적으로 구독하고 read이 변경되면 자신의 코드를 실행할 수도 있습니다 (observables documentation의 중간에 "명시 적으로"관찰 가능 목록에 등록 "참조).

편집 : Here's 한 사용자가 관찰 가능한 속성을 가진 항목으로 관찰 가능 어레이를 설정하는 방법을 설명하는 스레드를 편집하십시오. Here은 저자 (Steve Sanderson)가 관찰 가능한 속성을 가진 관찰 가능한 배열을 시연 한 예를 보여줍니다.

두 가지 방법을 사용하면 POST에 대한 AJAX 호출을 서버로 다시 수행 할 수있는 것처럼 보입니다.

업데이트 : 여기 당신이 구현할 수있는 방법의 예 :

$(function() { 
    var initialData = {/*Data retrieved by AJAX or on page load*/}; 

    var markRead = function(conversation) { 
     // Make AJAX POST here to update read status of 
     // the conversation 
    }; 

    // Convenience object for conversations. 
    var Conversation = function(conversation_id, status, read) { 
     this.conversation_id = conversation_id; 
     this.status = status; 
     this.read = ko.observable(read); 
    }; 

    var initialUnread = 0; 

    var viewModel = { 
     // Map the conversation list to a new array containing 
     // objects with observable properties. 
     conversationList: ko.observableArray(ko.utils.arrayMap(
     initialData.conversationlist, function(data) { 
      if (!data.read === false) { 
       initialUnread++; 
      } 
      return new Conversation(
       data.conversation_id, 
       data.status, 
       data.read); 
     })), 
     unreadCount: ko.observable(initialUnread), 

     // Executed when the user toggles a conversation's 
     // read status. 
     toggleRead: function(conversation) { 
      // Update the unread count. 
      viewModel.unreadCount(
       viewModel.unreadCount() + 
       (conversation.read() ? 1 : -1)); 

      // Update the conversation via AJAX 
      markRead(conversation); 
      return true; 
     } 
    }; 
    ko.applyBindings(viewModel); 
}); 

Demo here.

참고 :

• 은 매핑 플러그인을 사용하지 않습니다. 일반적인 논리는 동일해야합니다.
• AJAX 호출이 실패하면 클릭 전의 상태로 확인란을 업데이트해야합니다.
• viewModel.unreadCount(<value>)을 호출하여 어디서나 viewModel의 unreadCount 속성을 업데이트 할 수 있습니다.
• 이것은 몇 가지 예제를 기반으로합니다. 구체적으로는 this one입니다. 복잡한 예는 특히 눈을 뜨고 KO로 할 수있는 멋진 것들을 보여줍니다.