저는 앞으로 몇 가지 프로젝트를 준비하기 위해 backbone.js 및 일부 jQuery 마법을 가지고 놀고 있습니다.backbone.js - 모델/뷰가 DOM 요소와 어떻게 연결되어 있습니까?
하나의 테스트 케이스에 행이 백본보기로 렌더링 된 테이블이 있습니다. 그들은 가치 변화에 대해 완벽하게 재 렌더링됩니다. 이후 전체 테이블은 jQuery 플러그인 (애니메이션 테이블 정렬)에 의해 정렬되고 행은 새로운 위치로 이동합니다. 사실이 프로세스는 한 번 작동하지만 다음에 행이 두 번 나타나면 모든 것이 혼돈으로 끝납니다.
DOM 요소와 백본보기 간의 링크가 이러한 변경을 처리 할 수 있습니까? 해결 방법이 있습니까?
backbone.js 또는 knockout.js와 같은 Model/View 프레임 워크를 사용하여 개발할 때, 생각과 구현을 재 배열하여 (정렬과 같이) 표시되는 내용을 변경해야합니다. 모델을 만들고 (jquery 플러그인 사용과 같이) 뷰에서 이들을 허용하지 않습니다.
뷰 사이드 스크립트를 사용하여 끝내기 만하면 (애니메이션이 좋은 예입니다.) 바인딩을 사용 중지하거나 확장하여 모델이 올바르게 업데이트되었는지 확인해야합니다.
documentation에 따르면 애니메이션 정렬 플러그인은 DOM에서 테이블 행을 제거하고 새 DIV에 추가하고 애니메이션을 적용한 다음 DIV에서 제거하고 표로 복원합니다. 이 모든 작업이 끝난 후 백본이 TD를 추적하지 못했고 변경 후 다시 렌더링하면 마지막 세트가 '없어진'이후로 새 세트를 추가하는 것입니다.
귀하의 컬렉션은 귀하의 모델에 대한 주문을 유지하므로 귀하의 해당보기가 유지됩니다. 외부의 힘 (jQuery 테이블 정렬 플러그인과 같은)이 뷰의 순서를 변경하면,이 변경은 본질적으로 백본 컬렉션에 반영되지 않으므로 상황이 빠르게 동기화되지 않습니다.
또한 테이블 분류기가 요소를 복제하고 원본을 제거하면 Backbone은 뷰 추적을 잃어 버리고 결국 다시 생성됩니다.
답장을 보내 주셔서 감사합니다. 실제로, 테이블 분류기는 바인딩을 유지하기가 어려운 fpr 백본을 만드는 많은 작업을 수행합니다. 나는 숨은 목록을 사용하여 다른 (보이는) 목록의 변경 사항에 애니메이션을 적용하는 위대한 Quicksand plugin으로 전환했습니다. backbone.js에 더 잘 맞습니다.
jQuery 플러그인과 같은보기 측 스크립트를 사용할 때 모델이 올바르게 업데이트되도록 "바인딩 비활성화 또는 확장"예제를 제공 할 수 있습니까? – Chetan
비활성화는 백본을 사용하여 페이지의 일부를 렌더링하는 것을 중지하는 것입니다. jquery 또는 무엇이든 직접 사용하고 모델에 바인딩하는 것을 잊어 버리십시오. 확장은 모델에 대한 업데이트를 알려주는 커넥터를 만든 다음 플러그인에 적용하고 플러그인 이벤트를 수신하여 해당 변경 사항으로 모델이 업데이트되는지 확인하는 것입니다. 그것은 어려운 일이 될 수 있습니다. 특히 가장자리의 경우에, 나는 보통 '비밀 소스'를 꺼내고 mvp/mvvm 프레임 워크 용 플러그인을 구현하여 jq 플러그인의 코드를 읽습니다. – JoshRivers
"플러그인 이벤트를 경청하고 모델이 이러한 변경 사항으로 업데이트되는지 확인하십시오."- 저를 위해 할 수있는 가장 쉬운 방법이라고 생각했습니다. 깨끗한 솔루션인가 아니면 프로젝트가 확장됨에 따라 디자인 문제가 발생할 수 있다고 생각합니까? – Chetan