Javascript 在Knockout.js中更新ObservalArray后，如何立即使用DOM容器？

我已经使用Knockout好几天了，这就是我用来组织视图模型和javascript模型的方法：

//******************************************************************************
// jQUERY START:
//******************************************************************************
$(document).ready(function()
{
    var panel1 = $('#panel1>section');
    var panel2 = $('#panel2>section');

    $('#loader').ajaxStart(function()
    {
        $(this).fadeIn();
    }).ajaxComplete(function()
    {
        $(this).fadeOut();
    });

    ko.applyBindings(new ViewModel(panel1));
});

//******************************************************************************
// VIEW MODEL:
//******************************************************************************
function ViewModel(_panel1)
{
    var self      = this;
    this.vmHeader = new HeaderViewModel();
    this.vmPanel1 = new Panel1ViewModel(_panel1);
}

//******************************************************************************
// Panel1ViewModel:
//******************************************************************************
function Panel1ViewModel(_element)
{
    var self            = this;
    self.element        = _element;
    self.filters        = ['Operations', 'Jobs', 'Shifts', 'Hours'];
    self.selectedFilter = ko.observable();
    self.vmOperations   = new OperationsViewModel();
    self.vmJobs         = new JobsViewModel();
    self.vmShifts       = new ShiftsViewModel();
    self.vmHours        = new HoursViewModel();

    //PUBLIC METHODS:
    self.clickFilter = function(filter)
    {
        self.selectedFilter(filter);

        switch(filter)
        {
            case 'Operations':
                self.vmOperations.load(self.clear, self.element);
                break;

            case 'Jobs':
                self.vmJobs.load(self.clear, self.element);
                break;

            case 'Shifts':
                self.vmShifts.load(self.clear, self.element);
                break;

            case 'Hours':
                self.vmHours.load(self.clear, self.element);
                break;
        }
    }

    self.clear = function()
    {
        //test each view model to see if it currently has items loaded and empty them.
        if (self.vmOperations.operations() != null) { self.vmOperations.operations(null); }
        if (self.vmJobs.jobs() != null) { self.vmJobs.jobs(null); }
        if (self.vmShifts.shifts() != null) { self.vmShifts.shifts(null); }
        if (self.vmHours.hours() != null) { self.vmHours.hours(null); }
    };
}

//******************************************************************************
// ShiftsViewModel:
//******************************************************************************
function ShiftsViewModel()
{
    var self      = this;
    self.shifts   = ko.observableArray(null);
    self.selected = ko.observable();

    //PUBLIC METHODS:
    self.load = function (callback, element)
    {
        var options = {
            url:    '/api/shifts',
            type:   'GET',
            data: {
                operationID: 1
            }
        };

        async_load(options, function (data)
        {
            callback();

            self.shifts(
                $.map(data.Items, function (item, index)
                {
                    return new Shift(item);
                })
            );

            element.overscroll();  <--- PROBLEM IS HERE!
        });
    }

    self.click = function(shift)
    {
        self.selected(shift.id);
    };
}

//******************************************************************************
// SHIFT MODEL:
//******************************************************************************
function Shift(data)
{
    var self       = this;
    this.operation = data.Operation;
    this.shopOrder = data.ShopOrder;
    this.date      = data.Date;
    this.id        = data.ID;
    this.number    = data.Number;
    this.start     = ko.observable(data.Start);
    this.end       = ko.observable(data.End);
    this.isRunning = ko.observable(data.IsRunning);

    //computed properties.
    this.shiftDate = ko.computed(function()
    {
        var date = (this.end() == '') ? new Date() : new Date(this.end());

        return date.toLocaleDateString();
    }, this);

    this.startTime = ko.computed(function()
    {
        return (new Date(this.start())).toLocaleTimeString();
    }, this);

    this.endTime = ko.computed(function()
    {
        var time = '---';

        if (this.isRunning() == 'False')
        {
            time = (new Date(this.end())).toLocaleTimeString();
        }

        return time;
    }, this);
}

//******************************************************************************
// GLOBAL FUNCTIONS:
//******************************************************************************
function async_load(options, callback)
{
    $.ajax({
        url:            options.url,
        async:          true,
        cache:          false,
        type:           options.type,
        data:           options.data,
        dataType:       'json',
        contentType:    'application/json',
        success:    callback,
        error: function (request, type, errorThrown)
        {
            error_handler(options.url, request, type, errorThrown);
        }
    });
}

function sync_load(options)
{
    var error = false;
    var data = $.ajax({
        url:            options.url,
        async:          false,
        cache:          false,
        type:           options.type,
        data:           options.data,
        dataType:       'json',
        contentType:    'application/json',
        error: function (request, type, errorThrown)
        {
            error = true;
            error_handler(options.url, request, type, errorThrown);
        }
    }).responseText;

    if (!error)
    {
        data = eval('(' + data + ')');
    }

    return (error) ? null : data;
}

function error_handler(name, request, type, errorThrown)
{
    switch (request.status)
    {
        case 404:
            alert('The ' + name + ' could not be found.');
            break;

        case 500:
            alert('There was an internal server error loading ' + name + '.');
            //redirect the user to a page with further instructions.
            break;

        default:
            alert('An error occurred: (' + request.status + ' ' + request.statusText + ').');
    }
}

//******************************************************************************
//jQUERY开始：
//******************************************************************************
$（文档）.ready（函数（）
{
变量panel1=$（“#panel1>section”）；
变量panel2=$（“#panel2>section”）；
$（'#loader'）.ajaxStart（函数（）
{
$（this.fadeIn（）；
}).ajaxComplete（函数（）
{
$（this.fadeOut（）；
});
ko.applyBindings（新视图模型（panel1））；
});
//******************************************************************************
//视图模型：
//******************************************************************************
功能视图模型（_panel1）
{
var self=这个；
this.vmHeader=new HeaderViewModel（）；
this.vmPanel1=新的Panel1ViewModel（_panel1）；
}
//******************************************************************************
//Panel1ViewModel：
//******************************************************************************
功能面板1视图模型（_元素）
{
var self=这个；
self.element=\u元素；
self.filters=['Operations'、'Jobs'、'shift'、'Hours']；
self.selectedFilter=ko.observable（）；
self.vmOperations=新操作视图模型（）；
self.vmJobs=newjobsviewmodel（）；
self.vmShifts=新的ShiftsViewModel（）；
self.vmHours=新的HoursViewModel（）；
//公共方法：
self.clickFilter=函数（过滤器）
{
自选择过滤器（过滤器）；
开关（过滤器）
{
“业务”案例：
self.vmOperations.load（self.clear、self.element）；
打破
“工作”一案：
self.vmJobs.load（self.clear、self.element）；
打破
个案"转变":
self.vmshift.load（self.clear、self.element）；
打破
案件"时间":
self.vmHours.load（self.clear、self.element）；
打破
}
}
self.clear=函数（）
{
//测试每个视图模型，查看它当前是否已加载项并清空它们。
if（self.vmOperations.operations（）！=null）{self.vmOperations.operations（null）；}
if（self.vmJobs.jobs（）！=null）{self.vmJobs.jobs（null）；}
if（self.vmShifts.shifts（）！=null）{self.vmShifts.shifts（null）；}
if（self.vmHours.hours（）！=null）{self.vmHours.hours（null）；}
};
}
//******************************************************************************
//ShiftsView模型：
//******************************************************************************
函数ShiftsViewModel（）
{
var self=这个；
self.shifts=ko.observearray（空）；
self.selected=ko.observable（）；
//公共方法：
self.load=函数（回调，元素）
{
变量选项={
url:“/api/shifts”，
键入：“GET”，
数据：{
操作ID:1
}
};
异步加载（选项、函数（数据）
{
回调（）；
自我转移(
$.map（data.Items，函数（item，索引）
{
返回新班次（项目）；
})
);
元素。overscroll（）；
我解决了问题：

在jqueryready函数中，我在加载任何数据之前缓存DOM元素，然后使用在容器元素中没有任何内容的缓存元素

所以，我改变了这一点：

var panel1 = $('#panel1>section');

致：

然后在ShiftsViewModel中，我更改了这一行：

element.overscroll();

致：

而且它现在似乎正在工作

var panel1 = '#panel1>section';

element.overscroll();

$(element).overscroll();