如何在 Adapt 框架上创建自定义 component/plugin？

Question

我成功安装了adapt框架。能够编辑新课程。但我需要创建一个新的自定义组件，与 textinput 非常相似。在 src/components 下，我尝试复制 adapt-contrib-textInput，在 bower.json 和函数 Adapt.register 中将其名称更改为我自己的自定义名称。然而，当我尝试在课程组件（在 src/course/en/components.js 中）中使用新组件时，它给我这个错误：

adaptView.js:48 Uncaught TypeError: template is not a function
    at n.render (adaptView.js:48)
    at n.initialize (adaptView.js:31)
    at n.e.View (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at new n (backbone.min.js:2)
    at n.addChildren (adaptView.js:103)
    at n.postRender (adaptView.js:38)

这是我的 bower.json:


    {
      "name": "adapt-html-testing",
      "version": "3.0.1",
      "framework": ">=2.0.16",
      "homepage": "https://github.com/adaptlearning/adapt-contrib-textInput",
      "issues": "https://github.com/adaptlearning/adapt_framework/issues/new",
      "description": "A question component that allows the learner to input text based upon a question stem.",
      "main": "/js/adapt-contrib-textInput.js",
      "displayName" : "Html Testing",
      "component" : "htmltesting",
      "keywords": [
        "adapt-plugin",
        "adapt-component"
      ],
      "license": "GPLv3"
    }

这是我的主要js，adapt-contrib-textInput.js:


       define([
        'core/js/adapt',
        './textInputView',
        './textInputModel',
    ], function(Adapt, TextInputView, TextInputModel) {

        console.log("register htmltesting: before");
        return Adapt.register('htmltesting', {
            view: TextInputView,
            model: TextInputModel
        });

       });

这是 components.js 组件（我留下的只是将组件字段更改为 htmltesting。它是 'textinput':

 {
        "_id": "c-70",
        "_parentId": "b-50",
        "_type": "component",
        "_component": "htmltesting",
        "_classes": "",
        "_layout": "left",
        "_attempts": 1,
        "_questionWeight": 1,
        "_canShowModelAnswer": true,
        "_shouldDisplayAttempts": false,
        "_isRandom": true,
        "_allowsAnyCase": true,
        "_allowsPunctuation": true,
        "title": "Text Input",
        "displayTitle": "Myyy Text Input",
        "body": "Can you name one of the three companies that established Adapt as a community led Open Source project?",
        "instruction": "Input your answer and select Submit.",
        "_answers": [
            ["City & Guilds Kineo", "Kineo"],
            ["Learning Pool"],
            ["Sponge"]
        ],
        "_items": [
            {
                "prefix": "",
                "placeholder": "Enter answer here",
                "suffix": ""
            }
        ],
        "_feedback": {
            "title": "Feedback",
            "correct": "Correct answer feedback.<br><br>That’s correct. The Adapt Open Source project was established by Kineo, Learning Pool and Sponge. At the time of writing, there are a total of nine <a href='https://www.adaptlearning.org/index.php/collaborators/' target='_blank'>official collaborators</a>.<br><br><em>Component facts: <strong>Text input</strong> components let learners enter their own answers, which is great for questions that require a bit more flexibility, like those with answers that could be written as both full words and numbers.</em>",
            "_partlyCorrect": {
                "final": "Incorrect answer feedback.<br><br>Sorry, that’s not right. The Adapt Open Source project was established by Kineo, Learning Pool and Sponge. At the time of writing, there are a total of nine <a href='https://www.adaptlearning.org/index.php/collaborators/' target='_blank'>official collaborators</a>.<br><br><em>Component facts: <strong>Text input</strong> components let learners enter their own answers, which is great for questions that require a bit more flexibility, like those with answers that could be written as both full words and numbers.</em>"
            },
            "_incorrect": {
                "final": "Incorrect answer feedback.<br><br>Sorry, that’s not right. The Adapt Open Source project was established by Kineo, Learning Pool and Sponge. At the time of writing, there are a total of nine <a href='https://www.adaptlearning.org/index.php/collaborators/' target='_blank'>official collaborators</a>.<br><br><em>Component facts: <strong>Text input</strong> components let learners enter their own answers, which is great for questions that require a bit more flexibility, like those with answers that could be written as both full words and numbers.</em>"
            }
        },
        "_pageLevelProgress": {
            "_isEnabled": true,
            "_isCompletionIndicatorEnabled": true
        }
    },

总而言之，我需要帮助了解如何创建自定义组件。似乎 adapt 文档 https://github.com/adaptlearning/adapt_framework/wiki/Developing-plugins 忘记提及一些重要的步骤。

我觉得我做得对，它应该可以工作，但我仍然收到此错误：

adaptView.js:48 Uncaught TypeError: template is not a function
    at n.render (adaptView.js:48)
    at n.initialize (adaptView.js:31)
    at n.e.View (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at new n (backbone.min.js:2)
    at n.addChildren (adaptView.js:103)
    at n.postRender (adaptView.js:38)

Answer 1

我通过将 .hbs 和 .less 文件的名称更改为我注册的组件名称 'htmltesting' 解决了这个问题。命名很重要，尽管我在文档中找不到任何提及。希望对大家有帮助。

如何在 Adapt 框架上创建自定义 component/plugin？

How to create a custom component/plugin on adapt framework?

javascript

adapt