如何在包含json的html中包含.js文件？

Question

我需要显示一个javascript类的实例，该实例在主干中使用require.js从.json文件中加载数据。

我有以下js和json文件：

collections / Companies.js

define([
    'models/Company'
], function(CompanyModel) {
    'use strict';

    var CompanyCollection = Backbone.Collection.extend({
        model: CompanyModel
    });

    return CompanyCollection;
});

数据/companies.json

[{
    "id": 1000001,
    "name": "Test Company 1",
    "description": "this is a test company that should be displayed"
},
{
    "id": 1000002,
    "name": "Test Company 2",
    "description": "this is another test company that should be displayed as well"
}]

另外，我有以下代码片段：

<script type="text/javascript" data-main="data/companies.json" src="collections/Companies.js"></script>
    <script type="text/javascript">
       require(["collections/Companies"],
        function(Companies){
            $("#json").append(Companies[0].id);
            alert("test");
        }
       );
    </script>

    <div id="json"></div>

当然，它不能按我的预期工作，我无法弄清楚正确的语法和/或迭代逻辑。 如何使用.json文件中的数据加载.js类？ 我的<script type="text/javascript" data-main...行似乎不起作用。

在此先感谢您，如果我不太清楚，请对不起。

Answer 1

requirejs通常用于加载脚本和模板文件，但是您也可以使用它来加载.json文件。 但是您必须自己使用JSON.parse进行解析。

您有2种不同的选择，

使用requirejs文本插件 ，例如：

require(["collections/Companies", "text!data/companies.json"],
    function(Companies, CompaniesJSONStr) {
        var CompaniesJSON = JSON.parse(CompaniesJSONStr);

    }
);

或使用requirejs插件 ，它再次使用text! 插入：

require.config({
    paths : {
        json: 'data'
    }
});

define([ 'collections/Companies', 'json!companies.json' ],
    function(Companies, CompaniesJSON){

    }
);