1

Knockout の使用を開始したばかりで、ドロップダウンからアイテムを選択して、UI に表示しているデータをフィルター処理したいと考えています。これまでのところ、ドロップダウンから選択した値をまだ取得できません。その後、その値に基づいて表示されるデータを実際にフィルタリングする必要があります。これまでの私のコードは次のとおりです。

    @model Models.Fixture

@{
    ViewBag.Title = "Fixtures";
    Layout = "~/Areas/Development/Views/Shared/_Layout.cshtml";
}
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script>
<script type="text/javascript">

    function FixturesViewModel() {
            var self = this;
            var baseUri = '@ViewBag.ApiUrl';
            self.fixtures = ko.observableArray();
            self.teams = ko.observableArray();

            self.update = function (fixture) {

                $.ajax({ type: "PUT", url: baseUri + '/' + fixture.Id, data: fixture });
            };

            self.sortByAwayTeamScore = function () {
                this.fixtures.sort(function(a, b) 
                { return a.AwayTeamScore < b.AwayTeamScore ? -1 : 1; });
            };

            self.select = function (team) {

            };

            $.getJSON("/api/fixture", self.fixtures);
            $.getJSON("/api/team", self.teams);
    }

    $(document).ready(function () {
        ko.applyBindings(new FixturesViewModel());
    }); 

  </script>

<div class="content">
    <div>
        <table><tr><td><select data-bind="options: teams, optionsText: 'TeamName', optionsCaption: 'Select...', optionsValue: 'TeamId', click: $root.select"> </select></td></tr></table>
        <table class="details ui-widget-content">
            <thead>
                <tr><td>FixtureId</td><td>Season</td><td>Week</td><td>AwayTeam</td><td><a id="header" data-bind='click: sortByAwayTeamScore'>AwayTeamScore</a></td><td>HomeTeam</td><td>HomeTeamScore</td></tr>
            </thead>    
            <tbody data-bind="foreach: fixtures">
                <tr>
                    <td><span data-bind="text: $data.Id"></span></td>
                    <td><span data-bind="text: $data.Season"></span></td>
                    <td><span data-bind="text: $data.Week"></span></td>
                    <td><span data-bind="text: $data.AwayTeamName"></span></td>
                    <td><input type="text" data-bind="value: $data.AwayTeamScore"/></td>
                    <td><span data-bind="text: $data.HomeTeamName"></span></td>
                    <td><input type="text" data-bind="value: $data.HomeTeamScore"/></td>
                    <td><input type="button" value="Update" data-bind="click: $root.update"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

編集：これを考え出した：

    <script type="text/javascript">

function FixturesViewModel() {
        var self = this;
        var baseUri = '@ViewBag.ApiUrl';
        self.fixtures = ko.observableArray();

        self.teams = ko.observableArray();
        self.TeamName = ko.observable('');

        self.filteredItems = ko.computed(function () {

            var TeamName = self.TeamName();
                if (!TeamName || TeamName == "None") {

                            return self.fixtures();
                        } else {
                            return ko.utils.arrayFilter(self.fixtures(), function (i) {
                                return i.AwayTeamName == TeamName;
                            });
                }
        });

        self.update = function (fixture) {
            $.ajax({ type: "PUT", url: baseUri + '/' + fixture.Id, data: fixture });
        };

        self.sortByAwayTeamScore = function () {
            this.fixtures.sort(function(a, b) 
            { return a.AwayTeamScore < b.AwayTeamScore ? -1 : 1; });
        };

        $.getJSON("/api/fixture", self.fixtures);
        $.getJSON("/api/team", self.teams);
}

$(document).ready(function () {
    ko.applyBindings(new FixturesViewModel());
}); 


<select data-bind="options: teams, optionsText: 'TeamName', optionsCaption: 'Select...', optionsValue: 'TeamName', value:TeamName"> </select>
4

1 に答える 1

5

ノックアウトでのフィルタリングは、通常、計算されたオブザーバブルを使用して行われます。これは、タイプのドロップダウンに基づいてフィルタリングできる基本的なViewModelです（「none」のフィルターオプションを含む）。

var ViewModel = function(data) {
    var self = this;
    self.filters = ko.observableArray(data.filters);
    self.filter = ko.observable('');
    self.items = ko.observableArray(data.items);
    self.filteredItems = ko.computed(function() {
        var filter = self.filter();
        if (!filter || filter == "None") {
            return self.items();
        } else {
            return ko.utils.arrayFilter(self.items(), function(i) {
                return i.type == filter;
            });
        }
    });
};

これがフィドルのコードなので、それで遊ぶことができます。

于 2012-12-01T23:00:08.020 に答える