Question

我一直在研究一个样本Knockout.js应用程序，其中有一个办公室列表，每个办公室都有一组或多组开放时间。

当我点击表格中的选择时，第一组开放时间下面会显示开放时间。

我希望能够通过单击按钮来循环显示数组，以显示Rota A的开放时间，然后显示B，然后是C，然后再次返回Rota A.

使用我当前的解决方案，如果我按下＆gt;＆gt;按钮当前索引增加但开放时间表不会更新，直到我重新按下选择按钮。

jsfiddle在这里https://jsfiddle.net/58p57dv3/

当我按＆gt;＆gt;＆gt;时，如何自动更新表中的营业时间？按钮

HTML

  <div id="container">
        <div id="officeInfo">
            <table>
                <thead>
                    <tr>
                        <th>Office ID</th>
                        <th>Office Name</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: offices">
                    <tr>
                        <td data-bind="text: OfficeID"></td>
                        <td data-bind="text: OfficeName"></td>
                        <td><a href="#" data-bind="click: $parent.selectOffice">Select</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="openingHours" data-bind="with: selectedOffice">
            <input type="button" value=">>>" data-bind="click: $parent.nextOpeningHourType">
            <table>
                <thead>
                    <tr>
                        <th>Day</th>
                        <th>Opening Time</th>
                        <th>Closing Time</th>
                    </tr>
                </thead>
                <tbody data-bind="with: OpeningHours()[$parent.index]">
                    <tr><td>Monday</td><td data-bind="text: MondayStartTime"></td><td data-bind="text: MondayEndTime"></tr>
                    <tr><td>Tueday</td><td data-bind="text: TuesdayStartTime"></td><td data-bind="text: TuesdayEndTime"></tr>
                    <tr><td>Wednesday</td><td data-bind="text: WednesdayStartTime"></td><td data-bind="text: WednesdayEndTime"></tr>
                    <tr><td>Thursday</td><td data-bind="text: ThursdayStartTime"></td><td data-bind="text: ThursdayEndTime"></tr>
                    <tr><td>Friday</td><td data-bind="text: FridayStartTime"></td><td data-bind="text: FridayEndTime"></tr>
                    <tr><td>Saturday</td><td data-bind="text: SaturdayStartTime"></td><td data-bind="text: SaturdayEndTime"></tr>
                    <tr><td>Sunday</td><td data-bind="text: SundayStartTime"></td><td data-bind="text: SundayEndTime"></tr>
                </tbody>
            </table>
        </div>
        </div>

JS

var OfficeViewModel = function() {
    var self = this;

    self.offices = officeList;

    self.selectedOffice = ko.observable();
    self.index = ko.observable();
    self.index = 0;

    self.nextOpeningHourType = function() {
        if (self.index < 2) {
            self.index++;
        } else {
            self.index = 0;
        }
    }

    self.selectOffice = function (office) {
        self.selectedOffice(office);
    }
}

Answer 1

我想如果只让index成为可观察的

，它会正常工作

self.index = ko.observable(0);
self.nextOpeningHourType = function() {
    if (self.index() < 2) {
        self.index(self.index()+1);
    } else {
        self.index(0);
    }
}

self.selectOffice = function (office) {
    self.index(0);
    self.selectedOffice(office);
}

并将您的标记更改为

<tbody data-bind="with: OpeningHours()[$parent.index()]">

JsFiddle：https://jsfiddle.net/newuserjs/58p57dv3/2/

通过索引访问子数组并在索引递增时更新视图

1 个答案: