ノックアウトでjsonデータをhtmlにリンクする方法

Question

JSONデータをHTMLにリンクするにはどうすればよいですか？スタックオーバーフローで見つかったものはすべて試しましたが、うまくいかなかったのですか？

JS：

define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojselectcombobox', 'ojs/ojinputtext', 'ojs/ojdatetimepicker', 'ojs/ojinputtext'], 
    function (oj, ko, $) { 

     function CustomerViewModel() { 
      var self = this; 
      this.isRequired = ko.observable(true); 
      self.formState = ko.observable('enabled'); 
      self.messages = ko.observableArray([]); 
      self.placeholder = ko.observable(false); 
      self.disableFormControls = ko.computed(function() { 
       if (self.formState() == 'disabled') 
        return true; 
       else 
        return false; 
      }); 
      self.readonlyFormControls = ko.computed(function() { 
       if (self.formState() == 'readonly') 
        return true; 
       else 
        return false; 
      }); 
      this.projectname = ko.observable(); 
      this.specification = ko.observable(); 
      this.URS = ko.observable(); 
      this.Design = ko.observable(); 
      this.disableControls = ko.observable(false); 
      this.val = ko.observableArray(); 
      this.val1 = ko.observableArray(); 
      this.val2 = ko.observableArray(); 
      this.val3 = ko.observableArray(); 
      this.val4 = ko.observableArray(); 
      this.val5 = ko.observableArray(); 
      var lgQuery = oj.ResponsiveUtils.getFrameworkQuery(oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP); 
      self.large = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery); 


      self.onClick = function() { 
       jQuery.ajaxSettings.traditional = true; 
       var data = {"Scenario": self.val(), "Complainces": self.val1(), "Role": self.val2(), "Size": self.val3(), "Duration": self.val4(), "Budget": self.val5()}; 
       $.getJSON("url",data).then(function(resData){ 
        console.log(resData); 
       }); 
       document.getElementById('secondStep').style.display = 'block'; 
       document.getElementById('FirstStep').style.display = 'none'; 

      }; 
      self.onClick1 = function() { 
       var dataVal2 = {"projectname": self.projectname(), "FunctionalSpecifications": self.specification(), "URS": self.URS(), "FunctionalDesign": self.Design(), "Scenario": self.val(), "Complainces": self.val1(), "Role": self.val2(), "Size": self.val3(), "Duration": self.val4(), "Budget": self.val5()}; 
       $.ajax({ 
        type: "POST", 
        url: "url, 
        data: JSON.stringify(dataVal2), 

        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        processData: true, 
        success: function (data, status, jqXHR) { 
         alert(data.result); 
         var projectId = data.result; 
         alert(projectId); 
        }, 
        error: function (xhr) { 
         alert(xhr.responseText); 
        } 
       }); 
       if (document.getElementById('secondStep')) { 
        if (document.getElementById('secondStep').style.display == 'none') { 
         document.getElementById('secondStep').style.display = 'block'; 
         document.getElementById('thirdStep').style.display = 'none'; 
        } else { 
         document.getElementById('secondStep').style.display = 'none'; 
         document.getElementById('thirdStep').style.display = 'block'; 
        } 
       } 
      }; 
      self.returnWizard = function() { 
       document.getElementById('secondStep').style.display = 'none'; 
       document.getElementById('FirstStep').style.display = 'block'; 
      }; 
      self.returnWizard1 = function() { 
       document.getElementById('thirdStep').style.display = 'none'; 
       document.getElementById('secondStep').style.display = 'block'; 
      }; 

      self.handleActivated = function (info) { 

      }; 
      handleAttached = function (info) { 

      }; 
      self.handleBindingsApplied = function (info) { 

      }; 
      self.handleDetached = function (info) { 

      }; 
     } 
     return new CustomerViewModel(); 
    } 
); 

返されるJSONはこの

Object {Scenario: "ScenaroioDoc1", Complainces: "ComplaincesDoc1", Role: "RoleDoc1", Size: "SizesDoc1", Duration: "DurationDoc1"} 

のように見え、私はそれが動作しませんでしたすべてのpossibiltyでデータバインドを使用していましたか？

<div data-bind="text: resData.Scenario"> 
</div> 

私は非常に異なることを試みましたが、誰もこれを達成する方法について考えている人はいません。

Answer 1

JS：

self.Data = ko.observable(); 
self.onClick = function() { 
    jQuery.ajaxSettings.traditional = true; 
    var data = {"Scenario": self.val(), "Complainces": self.val1(), "Role": self.val2(), "Size": self.val3(), "Duration": self.val4(), "Budget": self.val5()}; 
    $.getJSON("url",data).then(function(resData){ 
     document.getElementById('FirstStep').style.display = 'none'; 
     self.Data(resData); 
     document.getElementById('secondStep').style.display = 'block'; 
    }); 
}; 

HTML：

<div id="secondStep" data-bind="with: Data"> 
    <div data-bind="text: Scenario"></div> 
    <div data-bind="text: Complainces"></div> 
    <div data-bind="text: Role"></div> 
    <div data-bind="text: Size"></div> 
    <div data-bind="text: Duration"></div> 
</div>