asp.net-mvc - asp.net mvc + ノックアウト + ajax 部分ロード + ビューモデルを再利用して、同じページ内で異なるデータをロードする

Question

1 つの asp.net MVC ページで、同じレイアウト/構造体の 3 つのレポートを表示する必要があります。そこで、Knockout データバインドを使用してレポートを生成するページを作成し、いくつかの追加パラメーターを渡すことで 10 個のレポートが生成されます。

Ajax 部分ビューを使用して 3 つのレポートすべてをロードしようとしましたが、この方法で 10 個のレポートを 1 つのページに入力しています。

ここで奇妙な問題が発生しました。各レポートのデータは異なりますが、3 つのレポートすべてに最後のレポート データが表示されます。誰でもこの問題を処理する方法を知っていますか?

Ajax 呼び出しを介して 3 つのレポートを呼び出すメイン ページ ビュー。

 <div id="RecentlyAddedReport" ></div>
    <div id="RecentlyConsultedReport"></div>
    <div id="RecentlyPrescribedReport"></div>

    <!-- start here -->
    <script type="text/javascript">
        $(document).ready(function () {
            AjaxLoadReport('RecentlyAddedReport', 'Patient/Report?type=RecentlyAdded&name=Recently Added');
            AjaxLoadReport('RecentlyConsultedReport', 'Patient/Report?type=RecentlyConsulted&name=Recently Consulted');
            AjaxLoadReport('RecentlyPrescribedReport', 'Patient/Report?type=RecentlyPrescribed&name=Recently Prescribed');
        });

        function AjaxLoadReport(reportType, actionURL) {
            var resultDiv = $('#' + reportType);
            $.ajax({ type: "GET", url: actionURL, data: {},
                success: function (response) {
                    resultDiv.html('');
                    resultDiv.html(response);
                }
            });
        }
    </script>

レポート ビュー - 3 つのレポートすべてに対して同じビューを呼び出します。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<TryHomeo.Web.UI.Models.UserControlViewData>" %>

<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script src="../../Scripts/jquery.timeago.js" type="text/javascript"> </script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"> </script>
<h1>
    <%:Model.ReportName%>
</h1>
<div class='loadingIndicator' title="Loading..."></div>
<ul id="<%=Model.ReportType %>" data-bind="template: { name: 'patient-template', foreach: patients}"></ul>
<script type="text/html" id="patient-template">   
    <span>
        <li>
            <div>
                <a data-bind="text: PatientName"></a>- (<abbr class='timeago' data-bind="timeago: DatedString"></abbr>)
            </div>
        </li>
    </span>
</script>
<script type="text/javascript">

    // ReportViewModel View Model //
    function ReportViewModel() {
        var self = this;
        self.patients = ko.observableArray([]);
    }

    var objVM = new ReportViewModel();
    ko.applyBindings(objVM);

    // Using jQuery for Ajax loading indicator 
    $(".loadingIndicator").ajaxStart(function () { $(this).fadeIn(); }).ajaxComplete(function () { $(this).fadeOut(); });

    $(document).ready(function () {
        $.ajax({
            dataType: 'json',
            url: '/Patient/GetPatientReport/?type=' + '<%=Model.ReportType %>' + '&' + '<%=DateTime.Now.ToString() %>',
            success: SetData,
            error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
        });
    });

    function SetData(data) {
        objVM.patients(data);
    }

    ko.bindingHandlers.timeago = {
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            var $this = $(element);
            // Set the title attribute to the new value = timestamp        
            $this.attr('title', value);
            // If timeago has already been applied to this node, don't reapply it -    
            // since timeago isn't really flexible (it doesn't provide a public     
            // remove() or refresh() method) we need to do everything by ourselves. 
            if ($this.data('timeago')) {
                var datetime = $.timeago.datetime($this);
                var distance = (new Date().getTime() - datetime.getTime());
                var inWords = $.timeago.inWords(distance);
                // Update cache and displayed text..    
                $this.data('timeago', { 'datetime': datetime });
                $this.text(inWords);
            } else {
                // timeago hasn't been applied to this node -> we do that now!          
                $this.timeago();
            }
        }
    };
</script>