フィルターが適用された後のアクセス配列

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は次のようになります。

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

私は間違っていない場合、あなたはそのように、矢印の機能を使用してのViewModelのスコープにごprintFuncの範囲を強制することができます

@autoinject() 
export class Tasks { 

    @bindable statusFilterValue; 

    tasks: Task[] 
    filteredTasks: Task[] 


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

} 

が続いthisprintFunc内は常にのインスタンスを参照しますTasksクラスを呼び出すことができます。だから、他のすべては同じままにすることができます。