如何在包含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){

    }
);