如何使用 JSON 对象填充淘汰表

Question

我有一个表单，我想使用来自 JSON 对象的剔除数据绑定来填充它。我已经使用敲除法对这些值进行了硬编码。我真正想要的是，因为我有一个 JSON 对象，我如何将其转换为 knockout 可以用来动态填充我的表单的数据？这是我的 FIDDLE

 <p>Hero Name: <span data-bind="text : HeroName" /></p>
 <p>Agent Writing Number: <span data-bind="text : HeroCode" /></p>
 <p>Contact Phone:  <span data-bind="text : ContactPhone" /></p>


var HeroDetails = $.get("GetHeroDetailsForVillianView", {
                HeroRequestIdForvillianDetailsView: HeroRequestIdForVillianDetailsView
            }, function (returnDataForDetails) {
                var results = JSON.parse(returnDataForDetails);

   $('#json').text(JSON.stringify({HeroName:'PeterParker', ContactPhone: '123456', HeroCode: 3 }, null, 4));


 function ViewModel() {
var self = this;

 self.HeroName = ko.observable("Peter Parker");
        self.ContactPhone = ko.observable("123456858");
        self.HeroCode = ko.observable("2455654");

 }

ko.applyBindings(new ViewModel());

Answer 1

有几种方法可以做到这一点，但使用 jQuery 非常简单。

https://jsfiddle.net/2bwegmsv/4/

我将 id 添加到您想要数据的每个 div，然后将其添加到您的 javascript:

var myJson = {HeroName:'PeterParker', ContactPhone: '123456', HeroCode: 3 };

    $('#hname').append(myJson.HeroName);
    $('#agent').append(myJson.ContactPhone);
    $('#contact').append(myJson.HeroCode);

可能无法完全按照您的意愿工作，但应该为您指明正确的方向。

Answer 2

查看 this page of the KO documentation for more details. You might also be interested in the mapping 插件。

这是我使用的模式：

function ViewModel(data) {
  var self = this;

  self.HeroName = ko.observable(data.HeroName);
  self.ContactPhone = ko.observable(data.PhoneNumber);
  self.HeroCode = ko.observable(data.HeroCode);

}

var viewModel;
$.getJSON("/some/url", function(data) { 
    viewModel = new ViewModel(data);
})

ko.applyBindings(viewModel);

Answer 3

动态：仅绑定 JSON 对象。

var jsonDataViewModel = {HeroName:'Peter Parker', ContactPhone: '123456', HeroCode: 3}; 
ko.applyBindings(jsonDataViewModel);

http://knockoutjs.com/documentation/observables.html

如何使用 JSON 对象填充淘汰表

How to Use JSON Object to populate Knockout Form

javascript

json

knockout.js

jspdf