필터 적용 후 액세스 배열

Question

필터 된 테이블의 모든 데이터를 인쇄하는 함수를 만들려고합니다.

모든 필터가 적용된 후 내 배열에 액세스하는 문제가 있습니다. tasks.ts의 함수가 내 클래스의 범위를 벗어나 내 "this"속성을 내 클래스에서 정의하지 않게 만듭니다. 더 좋은 방법이 있나요?

내 사용자 정의 필터

export class PrintValueConverter { 
    toView(array, printFunc) { 
     printFunc(array); 
     return array; 
    } 
} 

내 표 (tasks.html)

<tr virtual-repeat.for="item of tasks | status:statusFilterValue | print:printFunc"/> 

내 뷰 클래스 (tasks.ts는)

@autoinject() 
export class Tasks { 

@bindable statusFilterValue; 

tasks: Task[] 
filteredTasks: Task[] 


printFunc(tasks){ 
     console.log(tasks); 
     console.log(this) 
     this.filteredTasks = tasks 
    } 

} 

작업 내 배열을 성공적으로 인쇄 그러나 이것은 정의되지 않은 것으로 해석됩니다, 왜? 그리고 나는 이것을 어떻게 얻는가?

Answer 1

당신은보기 모델의 범위 밖에있는 함수를 호출하고 있습니다. 이것은 기능의 범위가 기술적으로 창 범위 (아마도)가된다는 것을 의미합니다.

값 변환기의 핵심은 값을 가져 와서 변환하는 것입니다. 그 값이 입력 필드의 값이든 리피터의 변수 (유스 케이스와 같은 값)이든간에. 컨텍스트는 뷰 모델이 아닌 값을 다루기 때문에 중요하지 않습니다.

나는 값 변환기를 잘못 사용하고 있다고 생각하지만,이 방법을 사용할 수있는 방법이 있습니다. 나는 당신이 달성하고자하는 일을하는 더 좋은 방법을 들여다 보는 것이 좋습니다.

여기서 가장 간단한 해결책은 뷰 모델의 컨텍스트를 다른 인수로 값 변환기로 전달하는 것입니다.이 경우 뷰 모델 클래스에 대한 참조가됩니다.

export class PrintValueConverter { 
    toView(array, printFunc, context) { 
     printFunc(array, context); 
     return array; 
    } 
} 

그런 다음 printFunc은 다음과 같이 보일 것이다 : 당신은 다음 뷰에서 사용할 수 this에 대한 참조를 만들 것입니다

printFunc(tasks, context) { 
    context.filteredTasks = tasks 
} 

. 우리는 이것을 context이라고 부를 것입니다.

constructor() { 
    this.context = this; 
} 

마지막으로 당신은 다음과 같이 그것을 참조합니다 : 자바 스크립트가 참조로 모든 과제를 처리하기 때문에

<tr virtual-repeat.for="item of tasks | status:statusFilterValue | print:printFunc:context"> 

이 작동합니다. 의미는 뷰 모델에 대한 참조를 전달할 때 동일한 인스턴스가 참조하는 다른 함수 나 애플리케이션의 일부분에서 볼 수 있습니다.

Answer 2

제가 잘못 본게 아니라면, 당신과 같이, 화살표 기능을 사용하여 뷰 모델의 범위로 printFunc의 범위를 강제 할 수

@autoinject() 
export class Tasks { 

    @bindable statusFilterValue; 

    tasks: Task[] 
    filteredTasks: Task[] 


    printFunc = (tasks) => { 
     console.log(tasks); 
     console.log(this) 
     this.filteredTasks = tasks 
    } 

} 

그런 다음 thisprintFunc 내에서 항상의 인스턴스를 참조합니다 귀하의 Tasks 클래스는 어디에서 전화했는지에 관계없이다른 모든 것들은 똑같이 유지 될 수 있습니다.