knockoutjs框架调用两个json的问题;我的代码已经运行成功但是我觉得我的代码写的不够专业

demo网址:http://demo.leekdigital.com.au/test.php

其中,实用knockoutjs调用两个json的代码我是这样写的,请问如何写的刚专业一点,之后可能会在一个页面里面调用超过2个以上的json:

 $(document).ready(function () {
        var viewModel = {};
        $.getJSON("JSON1.json", function (data) {
            console.log(data);
            viewModel.json1 = ko.mapping.fromJS(data);
            // ko.applyBindings(viewModel);
        });
        
        $.getJSON("JSON2.json", function (data) {
            console.log(data);
            viewModel.json2 = ko.mapping.fromJS(data);
            ko.applyBindings(viewModel);
        });

        // 我个人认为将 ko.applyBindings(viewModel); 这句写在这里(大括号外)看上去更规范,但是会把错,按照上方代码,卸载json2的调用里,有时候json2调用会失效。

    });

 

演示图

代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script> 
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
 </head>
 <body>
  <h2>Using knockoutjs binding two JSON</h2>
<div>
  <table>
    <thead>
      <tr>
        <th>from JSON 1</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: json1">
      <tr>
        <td data-bind="text: name"></td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  <table>
    <thead>
      <tr>
        <th>from JSON 2</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: json2">
      <tr>
        <td data-bind="text: firstName"></td>
      </tr>
    </tbody>
  </table>
</div>
 </body>

<script>

    $(document).ready(function () {

test("http://demo.leekdigital.com.au/JSON1.json");
test("http://demo.leekdigital.com.au/JSON2.json");
    });

function test(url) {
	var viewModel = {};
        $.getJSON(url, function (data) {
            viewModel.json = ko.mapping.fromJS(data);
            ko.applyBindings(viewModel);
        });
}
</script>

</html>

您好,第二个json调用的时候报错“You cannot apply bindings multiple times to the same element.”

另外html代码中,<tbody data-bind="foreach: json1"> 中的json1,是怎么定位的?

麻烦您能抽空再帮我看一下。

您好,第二个json调用的时候报错“You cannot apply bindings multiple times to the same element.”

另外html代码中,<tbody data-bind="foreach: json1"> 中的json1,是怎么定位的?

麻烦您能抽空再帮我看一下。

你是直接用我的代码还是自己再修改过??修改过,请帖上代码