programing

단순 ng-repeat용 단방향 바인딩?

telecom 2023. 4. 5. 21:17
반응형

단순 ng-repeat용 단방향 바인딩?

ng-repeat은 2000개 이상의 아이템이 있으면 퍼포먼스가 나빠진다는 기사를 읽은 적이 있습니다.왜냐하면 쌍방향 바인딩이 너무 많아서 볼 수 없기 때문입니다.angularjs는 처음이라 ng-repeat와 양방향 바인딩의 관계를 이해하는 데 어려움이 있습니다.

  1. ng-repeat(json 객체 목록 출력 등)은 반드시 양방향 바인딩을 생성합니까?

  2. 단방향 바인딩만을 사용하여 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%가 아닌 용기 내에서 스크롤할 수 있도록 무한 스크롤 명령을 약간 수정했습니다.

기본적으로 처음에 렌더링하는 개체 수를 제한한 다음 무한 스크롤 지시어를 사용하여 필요에 따라 더 많은 개체를 렌더링합니다.외부 모듈은 필요 없기 때문에 필요에 따라 자체 스크립트를 사용하여 무한 스크롤 기능을 모방하면 됩니다.

주의: 이렇게 하면 성능 문제가 해결되지만 양방향 바인딩은 제거되지 않습니다.

  1. ng-model에 의해 생성되는 것은 데이터(모델)에 워처가 있어 200개의 워처를 넘나들 경우 페이지 퍼포먼스가 저하됩니다.

  2. 단방향 바인딩 http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/ 에 대해서는, 이것을 참조해 주세요.다만, 올바르게 사용하고 있는 것을 확인해 주세요.

도움이 되었으면 좋겠어!!!

언급URL : https://stackoverflow.com/questions/19797225/simple-one-way-binding-for-ng-repeat

반응형