應用過濾器後的訪問陣列

我試圖創建一個函數來打印我的過濾表中的所有數據。應用過濾器後的訪問陣列

我遇到的問題是在應用了所有過濾器後訪問我的數組。我在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 
    } 

}

任務成功打印出我的陣列但這解決了未定義，爲什麼？我如何實現這一目標？

來源

2016-09-27 Simon Lundh

你的問題是你從視圖模型的範圍之外調用一個函數。這意味着函數的範圍在技術上成爲窗口範圍（可能）。

值轉換器的一點是取一個值並將其轉換。無論是來自輸入字段的值還是來自中繼器中變量的值（如您的用例）。上下文無關緊要，因爲你正在處理值，而不是視圖模型。

雖然我認爲你錯誤地使用了值轉換器，但有一種方法可以使這項工作。我建議你看看你想要達到的更好的方法。

這裏最簡單的解決方案是將視圖模型的上下文作爲另一個參數傳遞給值轉換器，在這種情況下，它將是對視圖模型類的引用。

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引用對待所有任務。這意味着如果你傳遞了對你的視圖模型的引用，那麼相同的實例將被任何其他函數或你的應用程序的一部分引用它。

來源

2016-09-28 06:27:46

如果我沒有記錯的話，你可以用一個箭頭功能，迫使你的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。所以一切都可以保持不變。

來源

2016-09-28 15:22:47

應用過濾器後的訪問陣列

回答

相關問題