체크리스트 목록에서 체크 된 값을 선택하지 못했습니다.

Question

체크 박스 목록에서 체크 된 바인딩에 문제가 있습니다.

JS

function vm() { 
    var self = this; 

    self.categories = [ 
     {id: 1, name: "Category 1"}, 
     {id: 2, name: "Category 2"}, 
     {id: 3, name: "Category 3"} 
    ]; 

    // Assume this item came from server side, 
    // that's why i'm using the mapping plugin here. 
    var rawItem = { links: [1] }; 
    self.item = ko.mapping.fromJS(rawItem); 
} 

ko.applyBindings(new vm()); 

HTML 당신이 바이올린에서 볼 수 있듯이

<div data-bind="foreach: categories"> 
    <div> 
     <label> 
      <span data-bind="text: name"></span> 
      <input class="checkbox" type="checkbox" data-bind="checked: $root.item.links, attr: {value: id}"> 
     </label> 
    </div> 
</div> 

<div data-bind="text: ko.toJSON(item.links)"></div> 

JSFiddle

, 첫 번째 문제는 self.category 항목에서 "ID"속성이 어떻게 든에 주조되어 있다는 것입니다 문자열, 그리고 비교 실패의 원인입니다. 어쨌든 문자열 links을 캐스팅하는 것은 예상대로 작동하지 않습니다.

요약하면 목표는입니다. 페이지의 입력란을 categories 배열의 값에 따라로드하십시오.

나는 더 복잡한 시나리오에서 이것을 재현하고 있으므로 가능한 매핑 요소를 추가하기 위해 매핑 플러그인을 추가했습니다.

Answer 1

Json 개체의 키가 JSON only allows key names to be strings입니다. 그 이유는 id을 문자열로 간주합니다.

HTML을

<div data-bind="foreach: categories"> 
    <div> 
     <label> 
      <span data-bind="text: name"></span> 
      <input class="checkbox" type="checkbox" data-bind="value: id, checked: $root.item"> 
     </label> 
    </div> 
</div> 

<div data-bind="text: ko.toJSON(item)"></div> 

자바 스크립트는

function vm() { 
    var self = this; 

    self.categories = [ 
     {id: "1", name: "Category 1"}, 
     {id: "2", name: "Category 2"}, 
     {id: "3", name: "Category 3"} 
    ]; 

    // Assume this item came from server side, 
    var rawItem = { links: ["1"] }; 
    self.item = ko.observableArray(rawItem.links); 
} 

ko.applyBindings(new vm()); 

다음은이 두 가지 문제가 있습니다 jsfiddle

Answer 2

입니다.

1) 캐릭터

<input class="checkbox" type="checkbox" data-bind="checked: $root.item.links, value: id"> 

"값"은 결합 든 비교 전에 KO 자체적으로 열을 주조로 전송된다. 사실, 항목 ID에 정수 값을 사용하려고 시도하고 항목 링크에 문자열 값을 사용하려고하면 체크 된 바인드가 작동합니다. 각 category.id 정수 경우에도, category.id == item.links[i] 경우, item.links = [1, 2, 3] 경우, 또는 "1" == "1" 경우 item.links = ["1", "2", "3"]에 "1" == 1처럼 뭔가에 비교를 회전 주조되어 있는지 확인하는 데 사용 그것은 그 id 재산 것 같아이 here

를 볼 수 있습니다.

2) 바인딩 순서

checked의 값 binding 전에 선언 결합하는 경우, 검사 동작은 제 값 변경 후에 발생했을. See here : 작업 코드의 유일한 차이점은 이 checked 앞에 오는 것입니다. 옵션에게 그 바이올린을로드하고 확인하려고 3.

그래서,

1. 항목을 이러한 문제를 해결하기 위해한다.링크 값이
2. 올바른 바인딩이 주문은 값 문자열이어야합니다 아이디, 검사 : $ root.item.links