jquery - 如何通过 knockout 将我的 json 数据链接到 html

Question

如何将 JSON 数据链接到 HTML，我已经尝试了在 Stack Overflow 上找到的所有方法，但没有成功？

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"}

我已经使用了数据绑定(bind)，但它不起作用？

<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>