尼克葱 2021-02-14 11:01 采纳率: 57.1%
浏览 70
已结题

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调用会失效。

    });
  • 写回答

4条回答 默认 最新

  • wanmeikakaxi 2021-02-14 11:46
    关注

    演示图

    代码

    <!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>
    评论

报告相同问题？

悬赏问题

  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）