Массив доступа после применения фильтра

Question

Я пытаюсь создать функцию для печати всех моих данных из отфильтрованной таблицы.

Проблема у меня есть доступ к моему массиву после применения всех фильтров. Моя функция в tasks.ts выходит из области видимости из моего класса, что делает мое «это» свойство неопределенным в моем классе. Есть ли лучший способ добиться этого?

Мой пользовательский фильтр

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 будет выглядеть следующим образом:

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

Затем вы хотите создать ссылку на this доступных в представлении. Мы назовем это context.

constructor() { 
    this.context = this; 
} 

Наконец вы затем ссылаться на него, как это:

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

Это работает, потому что Javascript обрабатывает все задания по ссылке. Если вы передадите ссылку на вашу модель представления, то тот же экземпляр будет замечен любой другой функцией или частью вашего приложения, ссылающейся на нее.

Answer 2

Если я не ошибаюсь, вы можете заставить сферу вашей printFunc в рамках модели представления путем, используя функцию стрелки, например, так:

@autoinject() 
export class Tasks { 

    @bindable statusFilterValue; 

    tasks: Task[] 
    filteredTasks: Task[] 


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

} 

Тогда this в printFunc всегда будет ссылаться на экземпляр ваш класс Tasks, независимо от того, где вы его вызываете.Таким образом, все остальное может оставаться неизменным.