1

スタディのリストを取得する 1 つのメイン json 呼び出しを使用して、ツリーのような構造を構築しようとしています。これから、さらに別の json 呼び出しで studyId を使用します。このクエリには常にデータがあるとは限りません。未定義をどのように処理しますか? ただし、これを正しく機能させることができなかったので、それは私の主な問題ではないかもしれません。私はこの投稿に目を光らせているので、お気軽に質問してください。かなり迅速に対応する必要があります。ありがとう！

//================================================ =====\

function StudyInfo(data) {
    this.StudyId = ko.observable(data.StudyId);
    this.Name = ko.observable(data.Name);
    this.Title = ko.observable(data.Title);
    this.Samples = ko.observableArray([]); // this field is not mapped in lazy load.
}
function SampleInfo(data) {
    this.Name = ko.observable(data.Name);
}

function viewModel() {
    var self = this;
    self.Studies = ko.observableArray([]);

    var request = $.getJSON("/api/studies");
    request.done(function (data) {
        var mappedStudies = $.map(data, function (item) {
            // now get study
            var study = new StudyInfo(item);
            study.Samples(self.getSamples(study.StudyId));
            return study;
        });
        self.Studies(mappedStudies);
    });
    request.fail(function (data) {
        // error stuff not important in example
    });
    self.getSamples = function (StudyId) {
        var request = $.getJSON("/api/samples/"+StudyId());
        request.done(function (data) {
            var mappedSamples = $.map(data, function (item) {
                var sample = new SampleInfo(item);
                return sample;
            });
            return mappedSamples;
        });
        request.fail(function (data) {
            // error stuff
        });
    };
}

//================================================ =====\

<!--- list that resembles a tree -->
<ul data-bind="foreach: Studies()">
     <li><a><span data-bind="text: Name"></span></a>
          <ul data-bind="foreach: Samples">
                <li><a><span data-bind="Title"></span></a>
          </ul>
     </li>
<ul>

//================================================ =====\

4

1 に答える 1

1

antishok のコメントに基づいて、ビューモデルでこれを試してください。

function viewModel() {
  var self = this;
  self.Studies = ko.observableArray([]);

  $.getJSON("/api/studies", function(allStudiesData) {

    $.each(allStudiesData, function (index, studyData) {

        var study = new StudyInfo(studyData);

        // The getJSON call returns immediately and the $.each loop will
        // loop around to the next study in allStudiesData.  Later on, 
        // each time the web server returns data to us from each of the samples
        // calls, the function(allSamplesData) will be called
        $.getJSON("/api/samples/"+studyData.StudyId, function(allSamplesData) {

            var mappedSamples = $.map(allSamplesData, function (sampleData) {
                var sample = new SampleInfo(sampleData);
                return sample;
            });
            study.Samples(mappedSamples);

            // If you put this push call outside the $.getJSON, the push would
            // happen before the mappedSamples were added to the study
            self.Studies.push(study);                    
        });                

    });

  });

  return self;
}

</p>

ただし、別のアプローチをお勧めします。/api/studieswithsamples を 1 回呼び出すだけで大量の JSON を取得できるように、このデータをすべてサーバーにまとめることをお勧めします。その後、コードを単純化できますが、本当の利点は、サーバーへの HTTP 呼び出しを 1 回実行するだけで、すべてのコードを取得できることです。これにより、ページの読み込み時間が改善される可能性があります。

PSビューモデルからselfを返すことを忘れないでください。

于 2012-12-08T02:52:55.227 に答える