javascript - jQuery スライダーを KnockOut モデルに結び付ける

Question

MVC と KnockOut/jQuery のスキルを磨くために、カート スタイルのアプリを作成しています。

部屋のタイプ、占有率などを選択できる場所で機能しており、合計値が更新されます。

私はこれまでに到達した場所の jsFiddle をここに持っています: http://jsfiddle.net/mtait/cGGvA/1/

3つのスライダーを追加したい：

          <label for="slider-1">Extra Towels:</label>
          <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" data-popup-enabled="true">
          <label for="slider-2">Morning Papers:</label>
          <input type="range" name="slider-2" id="slider-2" min="0" max="100" value="50" data-show-value="true">
          <label for="slider-3">Packed Lunch:</label>
          <input type="range" name="slider-3" id="slider-3" min="0" max="100" value="50" data-show-value="true" data-popup-enabled="true">

また、いくつかの Javascript を追加して、各スライダー項目のコストをスライダーに関連付けます。

<script>
   var slider1cost = 10;
   var slider2cost = 40;
   var slider3cost = 65;    
</script>

たとえば、誰かが予備のタオル 2 枚、朝刊 1 枚、お弁当 0 を選択した場合、今と同じようにTotal Value部屋代を計算して、さらに 60 ポンド (2 x 10 + 1 x 40 ）。

以下の KnockOut コードは、部屋のみに接続されています。スライダーの値をそのコードに追加するにはどうすればよいですか。

私がこれまでに持っているHTML全体は次のとおりです。

<div class='liveExample'>
<table width="100%" style="width:99%;" data-role="table" id="movietable2" class="ui-body-c ui-shadow table-stripe ui-responsive ui-table ui-table-columntoggle">
    <thead>
        <tr class="ui-bar-b">
            <th data-priority="1">Room Type</th>
            <th data-priority="2">Occupants</th>
            <th data-priority="4">Number reqd</th>
            <th data-priority="6"></th>
        </tr>
    </thead>
    <tbody data-bind='foreach: lines'>
        <tr>
            <td>
                <select data-bind='jqmOptionsdfd: sampleProductCategories, options: $root.RoomCategories, optionsText: "TypeName", optionsCaption: "Select...", value: category'></select>
            </td>
            <td data-bind="with: category">
                <select id="mine" data-bind='jqmOptionsdfd: sampleProductCategories, options: Occs, optionsText: "occdesc2", optionsCaption: "Select...", value: $parent.occupancy'></select>
            </td>
            <td class='quantity' data-bind="with: category">
                <select data-bind="visible: $parent.occupancy, options: ko.utils.range(0, TypeCount), value: $parent.quantiyt, jqmOptions:sampleProductCategories"></select>
            </td>
            <td> <a href="#" data-bind='click: $parent.removeLine' data-role="button" data-icon="delete">Remove</a>

            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4" style="text-align:center;">
                 <h4 class='grandTotal'>
                Total value: <span data-bind='text: formatCurrency(grandTotal())'></span>
            </h4> 
                <button data-bind='click: addLine' data-icon="plus">Add another room</button>
            </td>
        </tr>
    </tfoot>
</table>
</div>
<hr />

<h1> Add Extras </h1>

<br />
<script>
  var slider1cost = 10;
  var slider2cost = 40;
  var slider3cost = 65;
</script>
<label for="slider-1">Extra Towels:</label>
<input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" data-popup-enabled="true">
<label for="slider-2">Morning Papers:</label>
<input type="range" name="slider-2" id="slider-2" min="0" max="100" value="50" data-show-value="true">
<label for="slider-3">Packed Lunch:</label>
<input type="range" name="slider-3" id="slider-3" min="0" max="100" value="50" data-show-value="true" data-popup-enabled="true">

JavaScript は次のとおりです。

var sampleProductCategories = [{
    "RoomName": null,
    "TypeName": "Type 1",
    "TypeID": 1,
    "TypeCount": 2,
    "Occs": [{
            "occdesc": "1 B&B",
            "curr": "£",
            "occdesc2": "1 B&B (£100.00)",
            "ratetocharge": 100.0000,
            "numOfOcc": 1,
            "RatesViewModel": null
    },
    {
            "occdesc": "1 Dinner",
            "curr": "£",
            "occdesc2": "1 Dinner (£100.00)",
            "ratetocharge": 100.0000,
            "numOfOcc": 1,
            "RatesViewModel": null
    }]
    },
    {
    "RoomName": null,
    "TypeName": "Type 2",
    "TypeID": 2,
    "TypeCount": 1,
    "Occs": [{
            "occdesc": "1 B&B",
            "curr": "£",
            "occdesc2": "1 B&B (£100.00)",
            "ratetocharge": 100.0000,
            "numOfOcc": 1,
            "RatesViewModel": null
    },
    {
            "occdesc": "1 Dinner",
            "curr": "£",
            "occdesc2": "1 Dinner (£100.00)",
            "ratetocharge": 100.0000,
            "numOfOcc": 1,
            "RatesViewModel": null
    }]
    }];


$(document).ready(function () {
    cart.RoomCategories(sampleProductCategories)


});

function formatCurrency(value) {
    return "£" + value.toFixed(2);
}

ko.bindingHandlers.jqmOptionsdfd = {
    update: function (element, valueAccessor, allBindingsAccessor, context) {
            ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, context);
            $(element).selectmenu();

            $(element).selectmenu("refresh", true);
            //    alert("triggered");
    }
};

 ko.bindingHandlers.jqmOptions = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
            ko.applyBindingsToNode(element, {
                    options: valueAccessor()
            }, context);
            $(element).selectmenu();
    },
    update: function (element, valueAccessor, allBindingsAccessor, context) {
            $(element).selectmenu("refresh", true);
    }
};

var CartLine = function () {
    var self = this;
    self.category = ko.observable();
    self.categoryID = ko.observable();
    self.occupancy = ko.observable();
    self.quantity = ko.observable(1);
    $('.liveExample').trigger('create');
    self.subtotal = ko.computed(function () {
            return self.occupancy() ? self.occupancy().ratetocharge * parseInt("0" + self.quantity(), 10) : 0;
    });

    // Whenever the category changes, reset the occupancy selection
    self.category.subscribe(function () {
            self.occupancy(undefined);
    });
};

var Cart = function () {
    // Stores an array of lines, and from these, can work out the grandTotal
    var self = this;
    self.RoomCategories = ko.observableArray([]);
    self.lines = ko.observableArray([new CartLine()]); // Put one line in by default
    self.grandTotal = ko.computed(function () {
            var total = 0;
            $.each(self.lines(), function () {
                    total += this.subtotal()
            })
            return total;
    });

    // Operations
    self.addLine = function () {
            self.lines.push(new CartLine());
            $('.liveExample').trigger('create');
    };
    self.removeLine = function (line) {
            self.lines.remove(line)
    };

};


var cart = new Cart();
ko.applyBindings(cart);

function mtMob() {
    $('.liveExample').trigger('create');
};

function mtMob2() {
    $('.liveExample').trigger('create');
};


function groupByTypeID(arr) {
    var groupBy = {};
    $.each(arr, function () {
            var currentCount = groupBy[this.TypeName] || 0;
            groupBy[this.TypeName] = currentCount + parseInt(this.TypeCount);
    });
    return groupBy;
}

function dump(arr, level) {
    var dumped_text = "";
    if (!level) level = 0;

    //The padding given at the beginning of the line.
    var level_padding = "";
    for (var j = 0; j < level + 1; j++) level_padding += "    ";
    if (typeof(arr) == 'object') { //Array/Hashes/Objects
            for (var item in arr) {
                    var value = arr[item];
                    if (typeof(value) == 'object') { //If it is an array,
                            dumped_text += level_padding + "'" + item + "' ...\n";
                            dumped_text += dump(value, level + 1);
                    } else {
                            dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                    }
            }
    } else { //Stings/Chars/Numbers etc.
            dumped_text = "===>" + arr + "<===(" + typeof(arr) + ")";
    }
    return dumped_text;
}

ご協力ありがとうございます。

マーク