淘汰，访问动态子项

Question

我有一个场景，学校的工作人员（即教师）可以选择早班。可以动态添加班次。我将成员添加到可观察的数组中，但它们没有出现在视图中。任何人都可以建议为什么？

查看

@{
    ViewBag.Title = "School";
}

<script src="~/Scripts/School.js"></script>
<h2>School</h2>

<div>Staff</div>
<div data-bind="foreach: Staff" style="border: solid 1px red; margin-left: 10px; margin-top: 5px; height: 300px; width: 100%;">
    <div style="border: solid 1px blue; height: 30px; width:auto; margin-left: 10px; margin-top: 10px; float:left;">
        <div data-bind="text: Name, drag: {value: $data}" style="width: 100px; float:left; white-space:pre-wrap; text-align: center; border: solid 1px blue;"></div>
    </div>
</div>

<div data-bind="foreach: Shifts" style="margin-bottom: 10px;">
    <div data-bind="text: 'Shift ' + id, attr: { id: 'Shift' + $index() + 1}" style="margin-top: 10px; "></div>
    <div>Morning Shift</div>
    <div data-bind="attr: {id: 'MorningShift' + id}, drop: {value: $data}, foreach: MorningShiftMembers" style="width: 100%; height: 100px; border: solid 1px blue">
        <div data-bind="text: Name" style="width: 100px; float:left; white-space:pre-wrap; text-align: center"></div>
    </div>
</div>
<a href="#" data-bind="click: AddShift">+ Add Shift</a>

MODEL（Knockout Script）

$(function () {
    $.getJSON("/School/Staff", function (data) {
        var viewModel = {
            //data
            Shifts: ko.observableArray(),
            shiftId: 1,
            Staff: ko.observableArray(data),
            currentShift: -1,
            currentEveningshift: -1,

            //Behaviors
            AddShift: function () {
                viewModel.Shifts.push({
                    id: this.shiftId,
                    backupId: 1,
                    MorningShiftMembers: ko.observableArray(),
                    AddMemberToMorningShift: function (itemToAdd, shift) {
                        var index = FindIndexOfShift(viewModel.Shifts(), shift);
                        viewModel.Shifts()[index].MorningShiftMembers().push(itemToAdd);
                    }
                });
                this.shiftId++;
            }
        };

        ko.applyBindings(viewModel);
    });
});

function FindIndexOfShift(array, id) {
    for (var i = 0; i < array.length; i++) {
        if (array[i].id == id) {
            return i;
        }
    }
    return -1;
}

(function () {
    var _dragged;
    ko.bindingHandlers.drag = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var dragElement = $(element);
            var dragOptions = {
                helper: 'clone',
                revert: true,
                revertDuration: 0,
                start: function () {
                    _dragged = ko.utils.unwrapObservable(valueAccessor().value);
                },
                cursor: 'default'
            };
            dragElement.draggable(dragOptions).disableSelection();
        }
    };

    ko.bindingHandlers.drop = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var dropElement = $(element);
            var dropOptions = {
                drop: function (event, ui) {
                    var uielement = event.target.id;
                    var isPrimaryRotation = uielement.search("MorningShift");
                    if (isPrimaryRotation == 0) {
                        currentShift = uielement.replace("MorningShift", "");
                        viewModel.AddMemberToMorningShift(_dragged, currentShift);
                    } 
                }
            };
            dropElement.droppable(dropOptions);
        }
    };
})();

控制器方法

public ActionResult School()
{
    return this.View();
}

public JsonResult Staff()
{
    List<Staff> fullStaff = new List<Staff>();
    Staff s1 = new Staff();
    s1.Id = 1;
    s1.Name = "staff1";
    Staff s2 = new Staff();
    s2.Id = 2;
    s2.Name = "staff2";

    fullStaff.Add(s1);
    fullStaff.Add(s2);

    var jsonShaped = from s in fullStaff
                     select new
                     {
                         id = s.Id,
                         Name = s.Name
                     };

    var rows = jsonShaped.ToArray();
    return this.Json(rows, JsonRequestBehavior.AllowGet);
}