Question

我有列表集合，如：

{Id : "101", Name :"XXX", Fare: 200 },
{Id : "102", Name :"YYY", Fare: 400 },
{Id : "103", Name :"ZZZ", Fare: 500 },

现在我想在knockoutJs中使用最小和最大票价实现Jquery UI滑块，基于它我会过滤我的列表。

如何使用knockoutjs将可观察数组最小和最大票价的最小值和最大值传递给Slider？

更新了代码：

HTML

  <div class="row">
    <div class="span3 well">
        <h4>Filter</h4>
        <hr />
        <div>            
            <strong>Fare Range</strong>
            <br />
            Rs&nbsp;<span id="minFare" data-bind="text : minFare" ></span>
            &nbsp;&nbsp;-&nbsp;&nbsp;Rs&nbsp;
            <span id="maxFare" data-bind="text : maxFare" ></span>
            <div id="slider-range"></div>
        </div>
        <hr />
        <div>
            <strong >Bus Type</strong>
            <ul data-bind="foreach : busTypes">
                <li>
                    <input type="checkbox" > <span data-bind="text : $data"></span>
                </li>
            </ul>            
        </div>
    </div>
    <div class="span9">
        <div class="well">
            <strong>Sort&nbsp;</strong>
            <div data-bind="foreach: sortingColumns" class="btn-group inline " data-toggle="buttons-checkbox">
                <div class="btn" data-bind="text : columnName, click : $root.sort">
                </div>
            </div>
        </div>
        <section id="no-more-tables">
            <table class="table-bordered table-striped table-condensed cf">
                <thead class="cf">
                    <tr>
                        <th>
                            Travel
                        </th>
                        <th>
                            Deparr
                        </th>
                        <th>
                            Arrive
                        </th>
                        <th class="numeric">
                            Seat
                        </th>
                        <th class="numeric">
                            Fare
                        </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: busResults">
                    <tr>
                        <td data-bind="text: CompanyName" data-title="Travel">
                        </td>
                        <td data-bind="text: DepartureTime" data-title="Depart">
                        </td>
                        <td data-bind="text: ArrivalTime" data-title="Arrive">
                        </td>
                        <td data-bind="text: Seats" data-title="Seat" class="numeric">
                        </td>
                        <td data-bind="text: Fare" data-title="Fare" class="numeric">
                        </td>
                        <td>
                            <a class="btn btn-info" href="#" >Select</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
</div>

的js

$(function () {
            $("#slider-range").slider({
                range: true,
                min: $("#minFare").text(),
                max: $("#maxFare").text(),
                values: [75, 300],
                slide: function (event, ui) {
                    $("#minFare").text(ui.values[0]);
                    $("#maxFare").text(ui.values[1]);
                    //$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                }
            });
            //$("#amount").val("$" + $("#slider-range").slider("values", 0) +
            //" - $" + $("#slider-range").slider("values", 1));
        });

knockoutjs ViewModel

function busResultsViewModel(param) {

    var self = this;
    var baseUri = "/api/BusApi/" + param;

    self.busResults = ko.observableArray();

    self.currentItem = ko.observable('');
    self.sortDirection = ko.observable(false);

    //Sort By Name
    self.sort = function (item) {
        var colName = item.columnName == "Travel" ? "CompanyName" : item.columnName;
        self.sortDirection(!self.sortDirection());

        var test = self.busResults.sort(function (obj1, obj2) {
            if (obj1[colName] == obj2[colName]) return 0;
            else if (obj1[colName] < obj2[colName])
                return -1;
            else
                return 1;
        });

        if (self.sortDirection())
            self.busResults(test);
        else
            self.busResults(test.reverse());
    };

    //Min/Max Fare // Tried
    self.minFare = ko.dependentObservable(function () {
        var min = 0;
        ko.utils.arrayForEach(self.busResults, function (item) {
            alert(item.Fare);
            if (item.Fare < min) {             
                min = item.Fare;
            }
        });
        return min;
    } );

    self.minFare = ko.observable("0");
    self.maxFare = ko.observable("800");
    self.busTypes = ko.observableArray(["AC", "Non-AC"]);

    //Sorting Coumns
    self.sortingColumns = ko.observableArray([
                                    { columnName: "Travel" },
                                    { columnName: "Fare" }
                                  ]);

    $.getJSON(baseUri, self.busResults);
}

模型结构

public class BusResult
    {
        public int Id { get; set; }
        public string CompanyName { get; set; }
        public string DepartureDate { get; set; }
        public string DepartureTime { get; set; }
        public string ArrivalDate { get; set; }
        public string ArrivalTime { get; set; }
        public string Amenities { get; set; }
        public short JourneyHours { get; set; }
        public short Seats { get; set; }
        public decimal Fare { get; set; }
        public IList<string> BusTypes {get; set;}
    }

Answer 1

终于开始工作了：

<强> HTML

<span id="minFare" data-bind="text : minFare"></span> &nbsp;&nbsp;-&nbsp;&nbsp;Rs&nbsp;
<span id="maxFare" data-bind="text : maxFare"></span>
<div id="slider-range"></div>

<强>的js 滑块

 $("#slider-range").slider({
        range: true,
        min: vm.minFare(),
        max: vm.maxFare(),
        step: 1,
        values: [vm.minFare(), vm.maxFare()],
        slide: function (event, ui) {
            vm.minFare(ui.values[0]);
            vm.maxFare(ui.values[1]);
        }
    });

<强> VM

//Min & Max Slider
function vm()
{
    var self = this;
    self.minFare = ko.observable();
    self.minFare.subscribe(function (newValue) {
       //TODO: Filter, min fare changed
    });

    self.maxFare = ko.observable();
    self.maxFare.subscribe(function (newValue) {
       //TODO: Filter, max fare changed
    });
 }

knockoutjs和jquery UI滑块

1 个答案: