javascript - 如何通过复选框值过滤表

Question

在我的 Razor View 中，我有一个包含 3 个未显示属性的表。 Id_Loaction、Id_Level 和 Id_Section

在此表上方，我有 3 个复选框列表，用于每个位置、级别和部分，并以适当的 ID 作为值。

@foreach (var section in Model.Sections)
{
    <li>
      <input type="checkbox" data-bind="checked: data" value="@Html.Encode(section.Value)"/>@Html.Encode(section.Text)
    </li>
}   

注意:section.Value 是元素的 ID，也用在表格行中

表格本身构建起来相当简单:

@foreach (var item in Model.Offers) 
{
    <tr data-bind="visible: data.IsChecked == true ">
    <td>
        @Html.DisplayFor(modelItem => item.Description)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Location)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.Text)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.Value)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.IsChecked)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Level)
    </td>
    <td>
        @Html.ActionLink("Details", "Details", new { id=item.ID })
    </td>
</tr>
}


<script type="text/javascript">
    var data = @Html.Raw(Json.Encode(Model.Sections));

    function FormViewModel(data) {
        this.data = ko.observableArray(data);
    }

    window.viewModel = new FormViewModel(data);

    console.log(viewModel.data());    
    ko.applyBindings(viewModel);
</script>

/编辑: 我已将代码更新为实际的困惑情况。 Model.Sections 是一个 ViewModel，它与用于 Model.Offers.Section 的 ViewModel 相同。两者都包含 Value、Text 和 IsChecked 属性。

我如何比较这两者并只显示选中该部分的表格行？

请慢点。 亲切的问候

Answer 1

这是一次尝试使用 knockout 和我假设 Serv 正在尝试做的精简版本。这是对象列表上的简单过滤器示例，可以轻松扩展以包含更多过滤器和更复杂的模型。

fiddle http://jsfiddle.net/zTRq2/3/

简单过滤器 View 模型:

function filterViewModel(data) {
    var self = this;
    self.text = ko.observable(data.text);
    self.checked = ko.observable(data.checked);
}

精简优惠 View 模型:

function offerViewModel(offer) {
    var self = this;
    self.description = offer.description;
    self.location = offer.location;
}

主视图模型:

function FormViewModel(data) {
    var self = this;
    // map data from server to locations filter
    self.locations = ko.observableArray(ko.utils.arrayMap(data.locations, function (filter) {
        return new filterViewModel(filter);
    }));

    self.offersView = ko.computed(function () {
        // get list of offers that were passed in, we'll manipulate filteredOffers from now on
        var filteredOffers = data.offers;

        // get all selected locations view models
        var selectedFilterLocations = ko.utils.arrayFilter(self.locations(), function (location) {
            return location.checked();
        });

        // run through util function to filter only offers that match any selected location
        filteredOffers = ko.utils.arrayFilter(filteredOffers, function (offer) {
            var matchesLocation = false;
            ko.utils.arrayForEach(selectedFilterLocations, function (location) {
                if (offer.location === location.text()) matchesLocation = true;
            });
            return matchesLocation;
        });

        return filteredOffers;
    });
};

HTML:

<!-- list of location checkboxes -->
<ul class="unstyled inline" data-bind="foreach: locations">
    <li>
        <input type="checkbox" data-bind="checked: checked" /> <span data-bind="text: text"></span>

    </li>
</ul>

<!-- table which is bound to the offersView computed observable -->
<!-- offersView is recalculated everytime a selection changes from the filter list -->
<table class="table-bordered">
    <tbody data-bind="foreach: offersView">
        <tr>
            <td data-bind="text: description"></td>
            <td data-bind="text: location"></td>
        </tr>
    </tbody>
</table>