Asp.net mvc 4 knockoutjs和jqueryui滑块

我收集了如下列表：

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

现在，我想在knockoutJs中实现jqueryui滑块，使用最小和最大票价，并在此基础上过滤我的列表

如何使用knockoutjs将可观察数组的最小值和最大值从最小值和最大值传递给滑块

更新代码：

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>

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);
}

<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>

knockoutjs-ViewModel

  <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>

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);
}

<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>

函数busResultsViewModel（参数）{
var self=这个；
var baseUri=“/api/BusApi/”+param；
self.busResults=ko.observableArray（）；
self.currentItem=ko.可观察（“”）；
self.sortDirection=ko.可观察（假）；
//按名称排序
self.sort=函数（项目）{
var colName=item.columnName==“旅行”？“公司名称”：item.columnName；
self.sortDirection（！self.sortDirection（））；
var测试=self.busResults.sort（功能（obj1、obj2）{
if（obj1[colName]==obj2[colName]）返回0；
else if（obj1[colName]

模型结构

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;}
    }

公共类总线结果
{
公共int Id{get；set；}
公共字符串CompanyName{get；set；}
公共字符串DepartureDate{get；set；}
公共字符串DepartureTime{get；set；}
公共字符串ArrivalDate{get；set；}
公共字符串到达时间{get；set；}
公共字符串{get；set；}
公共短途旅行时间{get；set；}
公共短座位{get；set；}
公共十进制票价{get；set；}
公共IList BusTypes{get；set；}
}

终于开始工作了：

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>

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);
}

<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>

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
    });
 }

---

你能发布你的滑块html和你的淘汰视图模型吗？@TomStudee用代码更新。我正在建立一个巴士预订引擎，以便列出所有巴士运营商和票价。现在我想用滑块根据价格范围进行过滤。