使用 knockoutJS 将 observable 动态绑定到 foreach 绑定中的输入

Question

我在视图中有下表：

<table class="table">
    <thead>

        <tr data-bind="foreach: ActiveFilters">
            <td>
                <input type="text" data-bind="value: dynamicFilter(Filter), valueUpdate: 'afterkeyup', returnAction:$root.filterData" />
            </td>
        </tr>           
    </thead>
</table>

以下是我的视图模型：

var vm = {
Title: ko.observable(),
Excerpts: ko.observable(),
Content: ko.observable(),
dynamicFilter: function (data) {
    var self = this;
    if (data.Filter == 'Title') {
        return self.Title();
    }
    else if (data.Filter == 'Excerpts') {
        return self.Excerpts();
    }
    else {
        return self.Content();
    }
} };

ActiveFilters 对象有一个名为Filter 的属性，其中包含我想要绑定为页面中输入字段的过滤器的名称。基于Filter 的值，我想动态地将一个可观察对象绑定到输入，如dynamicFilter 函数所示，并使用可观察对象访问用户稍后输入的值以过滤网格中的数据。我们如何在 Knockout 中实现这一点？

编辑

我还有一个问题，我声明视图模型的语法是否正确？（对 KO 还是新手）。假设我在视图模型中有一个名为 filterData 的函数，并且我想在 dynamicFilter 函数中调用该函数，我使用以下语法：

var vm = {
Title: ko.observable(),
Excerpts: ko.observable(),
Content: ko.observable(),
dynamicFilter: function (data) {
    var self = this;
    if (data.Filter == 'Title') {
        return self.Title();
        vm.filterData();// is this correct?
    }
    else if (data.Filter == 'Excerpts') {
        return self.Excerpts();
    }
    else {
        return self.Content();
    }
},
filterData: function(){
 //TODO
} };

上述调用函数的方式正确吗？

Answer 1

如果Filter不发生变化，可以直接在dynamicFilter中返回observable，而不用去掉括号返回它的值：

var vm = {
Title: ko.observable(),
Excerpts: ko.observable(),
Content: ko.observable(),
dynamicFilter: function (data) {
    var self = this;
    if (data.Filter == 'Title') {
        return self.Title; //instead of return self.Title();
    }
    else if (data.Filter == 'Excerpts') {
        return self.Excerpts;  //instead of return self.Excerpts();
    }
    else {
        return self.Content;  //instead of return self.Content();
    }
} };

另一个可能更具可读性的选项是使用 if 语法：

<tr data-bind="foreach: ActiveFilters">
  <td>
    <!-- ko if: Filter == 'Title' -->
    <input type="text" data-bind="value: Title, valueUpdate: 'afterkeyup', returnAction:$root.filterData" />
    <!-- /ko -->
    <!-- ko if: Filter == 'Excerpts' -->
    <input type="text" data-bind="value: Excerpts, valueUpdate: 'afterkeyup', returnAction:$root.filterData" />
    <!-- /ko -->
    <!-- ko if: Filter != 'Title' && Filter != 'Excerpts' -->
    <input type="text" data-bind="value: Content, valueUpdate: 'afterkeyup', returnAction:$root.filterData" />
    <!-- /ko -->
  </td>
</tr>