단순 ng-repeat용 단방향 바인딩?
ng-repeat은 2000개 이상의 아이템이 있으면 퍼포먼스가 나빠진다는 기사를 읽은 적이 있습니다.왜냐하면 쌍방향 바인딩이 너무 많아서 볼 수 없기 때문입니다.angularjs는 처음이라 ng-repeat와 양방향 바인딩의 관계를 이해하는 데 어려움이 있습니다.
ng-repeat(json 객체 목록 출력 등)은 반드시 양방향 바인딩을 생성합니까?
단방향 바인딩만을 사용하여 ng-repeat을 수행하는 간단한 방법이 있습니까?(외장 모듈은 필요 없는 것이 바람직합니다.)
앞서 설명한 user1843640과 마찬가지로 Angular 1.3에 있는 경우 원타임바인딩을 사용할 수 있지만 명확하게 하기 위해 리피터뿐만 아니라 모든 바인딩에 ::를 붙여야 합니다.의사는 다음과 같이 말합니다.
<div ng-repeat="item in ::items">{{item.name}}</div>
근데 시청자 수를 세어보면 이게 한 명만 빠진 거예요.양방향 바인딩의 수를 실제로 드롭하려면 다음과 같이 리피터 내의 바인딩에 :: 를 배치합니다.
<div ng-repeat="item in ::items">{{::item.name}}</div>
다음은 워치 수를 표시하는2개의 플런커를 나타냅니다.
watchers를 카운트하기 위한 함수를 제공해주신 Miraage에 감사드립니다.https://stackoverflow.com/a/23470578/2200446
이제 Angular 1.3을 사용하거나 Angular 1.3으로 업그레이드하려면 "일회성 바인딩"을 사용할 수 있습니다.ng-repeat의 경우 다음과 같습니다.
<div ng-repeat="item in ::items">{{item.name}}</div>
주의:::items
구문을 사용합니다.
자세한 내용은 Angular 문서에서 식을 확인하십시오.
이 블로그 투고는 몇 가지 흥미로운 해결책을 제시합니다.최종 결과는 다음과 같습니다.
AngularJS 1.1.5로 업그레이드하고 limitTo를 무한 스크롤과 함께 사용합니다.각진JS ng-repeat은 버전 1.1.4부터 limitTo 옵션을 제공합니다.창의 높이가 100%가 아닌 용기 내에서 스크롤할 수 있도록 무한 스크롤 명령을 약간 수정했습니다.
기본적으로 처음에 렌더링하는 개체 수를 제한한 다음 무한 스크롤 지시어를 사용하여 필요에 따라 더 많은 개체를 렌더링합니다.외부 모듈은 필요 없기 때문에 필요에 따라 자체 스크립트를 사용하여 무한 스크롤 기능을 모방하면 됩니다.
주의: 이렇게 하면 성능 문제가 해결되지만 양방향 바인딩은 제거되지 않습니다.
ng-model에 의해 생성되는 것은 데이터(모델)에 워처가 있어 200개의 워처를 넘나들 경우 페이지 퍼포먼스가 저하됩니다.
단방향 바인딩 http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/ 에 대해서는, 이것을 참조해 주세요.다만, 올바르게 사용하고 있는 것을 확인해 주세요.
도움이 되었으면 좋겠어!!!
언급URL : https://stackoverflow.com/questions/19797225/simple-one-way-binding-for-ng-repeat
'programing' 카테고리의 다른 글
WPF에서의 컨트롤 템플릿과 DataTemplate의 차이 (0) | 2023.04.10 |
---|---|
React에서 JQuery를 사용하는 방법JS (0) | 2023.04.05 |
TypeScript의 public static const (0) | 2023.04.05 |
React 컴포넌트에서 Markdown을 렌더링하려면 어떻게 해야 합니까? (0) | 2023.04.05 |
콜백 함수에서 jQuery Ajax 요청 URL에 액세스하다 (0) | 2023.04.05 |