KnockoutJS显示模型中的所有行

Question

我有一个jquery / knockout应用程序 - 用于选择酒店的可用性。

我的JSon数据是：

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
}]
}, {
"RoomName": null,
    "TypeName": "Type 3",
    "TypeID": 3,
    "TypeCount": 5,
    "Occs": [{
    "occdesc": "1 B&B",
        "curr": "£",
        "occdesc2": "1 B&B (£150.00)",
        "ratetocharge": 150.0000,
        "numOfOcc": 1,
        "RatesViewModel": null
}, {
    "occdesc": "1 Dinner",
        "curr": "£",
        "occdesc2": "1 Dinner (£180.00)",
        "ratetocharge": 180.0000,
        "numOfOcc": 1,
        "RatesViewModel": null
}]
}];

我的HTML / Knockout是：

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

任何人都可以帮我改变这一点，以便每个“RoomName”从一开始就显示出来。所以它显示：

类型1 .... 2型...... 输入3 ....

...无需点击添加另一个房间？

目前有一个JSFiddle：http://jsfiddle.net/cGGvA/9/

感谢您的帮助，

标记

它的jQuery是：

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


});

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

ko.bindingHandlers.slider = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var max, min, observable, sValue, step;

min = 0;
max = 100;
sValue = 50;
step = 1;
observable = valueAccessor();
if (allBindingsAccessor().min != null) {
min = allBindingsAccessor().min;
}
if (allBindingsAccessor().max != null) {
  max = allBindingsAccessor().max;
}
if (allBindingsAccessor().slider() != null) {
  sValue = allBindingsAccessor().slider();
}
if (allBindingsAccessor().step != null) {
  step = allBindingsAccessor().step;
}
$(element).slider({
  value: sValue,
  min: min,
  max: max,
  step: step
}).on('slide', function(ev, ui) {
var slideValue;

slideValue = ui.value;
  alert(slideValue);
if (slideValue < min) {
  $(element).slider('value', min);
  return observable(min);
} else if (slideValue > max) {
  $(element).slider('value', max);
  return observable(max);
} else {
  return observable(slideValue);
}
}).on('stop', function(event, ui) {
if (ui.value < min) {
  $(element).slider('value', min);
  return observable(min);
} else if (ui.value > max) {
  $(element).slider('value', max);
  return observable(max);
}
});
return ko.bindingHandlers.validationCore.init(element, valueAccessor, allBindingsAccessor);
},
 update: function(element, valueAccessor, allBindingsAccessor, viewModel) {}
};

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);
self.extraTowels = ko.observable(0);
$('.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;
}