Question

我正在尝试创建一个函数来打印过滤表中的所有数据。

我遇到的问题是在应用所有过滤器后访问我的数组。我在tasks.ts中的功能超出了我的班级的范围，这使我的＃34;这个＆＃34;我的班级中未定义的属性。有没有更好的方法来实现这个目标？

我的自定义过滤器

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的范围到ViewModel的范围，如下所示：

@autoinject()
export class Tasks {

    @bindable statusFilterValue;

    tasks: Task[]
    filteredTasks: Task[]


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

}

然后this中的printFunc将始终引用您Tasks班级的实例，无论您从哪里调用它。所以其他一切都可以保持不变。

应用过滤器后访问数组

2 个答案: