2012-11-27 5 views
1

나는 녹아웃을 처음 접했고, 나는 나의 웹 사이트에서 매우 유용 할 수있는 체크 박스 바인딩의 예를 발견했다. 예제로 링크 : http://knockoutjs.com/documentation/checked-binding.htmlknockout "check"바인딩이 작동하지 않음

내 페이지에 적용하려고했지만 작동하지 않아 아무 것도 변경하지 않고이 예제를 복사하려고했지만 여전히 작동하지 않았습니다. 내가 다른 브라우저 (크롬, 파이어 폭스, IE)에서 그것을 시도하고 녹아웃 라이브러리의 다른 버전을 포함하지만 여전히 작동하지 않았다. 내가 뭘 잘못하고 있는지 전혀 모르겠다. 도와주세요!

<!DOCTYPE html> 
<head> 
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js'></script> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Dokument bez tytułu</title> 
</head> 

<body> 
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> 
<div data-bind="visible: wantsSpam"> 
Preferred flavors of spam: 
<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div> 
<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div> 
<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div> 
</div> 

<script type="text/javascript"> 
var viewModel = { 
    wantsSpam: ko.observable(true), 
    spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes 
}; 

// ... then later ... 
viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox 
</script> 
</body> 
</html> 

답변

1

은 당신이보고있는 것은 조각이 아니라 완전히 동작하는 예제입니다 : 여기

이 예제의 코드입니다. 당신은 몇 가지 일을해야합니다.

당신은 applyBindings해야합니다

ko.applyBindings(viewModel); 

그리고 당신은 DOM이로드 된 후 (또는 녹아웃은 매우 화가 얻을 것이다) 그렇게해야합니다.

는 여기에 내가 조금 더 쉽게 결합, 사실, 체크 박스가 볼 수 있도록 내 예를 업데이트했습니다 example

입니다. 확인란을 선택하거나 선택 취소 할 때마다 변경되는 확인란 목록 아래에있는 spamFlavors 목록이 있습니다.

+0

미안하지만, 왜'setTimeout' 함수가 필요합니까? :) – Pavlo

+0

@ Pavlo : 당신은하지 않습니다. 코드에서 모델이 변경되면 UI에 반영됩니다. 나는 그 다음에 "그 다음에 ..."부분을 취했다. –

+0

오, 내 잘못, 방금보고 싶었어, 이제 알았어 :) 고마워! – Pavlo