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的属性，它具有我想要绑定为页面中输入字段的过滤器的名称。根据{{1}}的值，我希望动态地将一个observable绑定到输入，如Filter函数所示，并使用observables访问用户稍后输入的值，以过滤网格中的数据。我们如何在Knockout中实现这一目标？

修改

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

dynamicFilter

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

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>

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

1 个答案: