javascript - 如何将类似 django 的 Formfields 添加到 Backbone 应用程序？

Question

我正在 backbone.js 中开发一个单页应用程序，它使用大量 html 表单来收集用户输入。为了节省编码时间，我想要一个类似于 Django's Form fields 的 FormField 模型/集合

我的要求:

• 表单元素及其行为的声明性规范(例如，需要 true/false、事件……)
• 所有表单字段的默认 View /模板(但可通过配置覆盖)
• 属于一个表单的所有字段都应该存储在一个 Backbone.Collection 中以便于字段检索
• 验证整个表单或单个元素

这是我的简单表单域实现的样子:

 FormField = Backbone.Model.extend({
    initialize: function (attributes, options){
        //TODO: initialize form field according to type,
        // i.e. set up correct view, validation etc.
    }
    defaults: {
        type: "TextField",
        label: "Unknown Label",
        required: false,
    }
});
FormFields = Backbone.Collection.extend({model: FormField})

MyPlugin = new PluginModel({
    //TODO: render a form with these config options within the edit view of the PluginModel
    config: FormFields([
        {type: "TextField", id:"store_name", label: "Name of Store", required: true},
        {type: "SelectField", id:"store_type", label: "Type of Store", required: true, choices: ['local','http']},
    ]),
    //runs after user "submits" form
    run: function (){
        if this.config.isValid(){

        }
    }
});

但是，我遇到了以下问题:

• Backbone.Collection 只能承载相同类型的模型。在一个集合中存储不同表单字段的最佳方法是什么？(我的方法是只使用一个 FormField 类，所有的区分都基于 initialize() 方法中的表单域类型，但这对我来说似乎有点困惑)
• 如何为每个 FormField 实例设置正确的 View ？

Answer 1

没有真正发现使用模型来指示 UI 元素...

保持模型干净。只有通过后端进出应用程序的数据。您的验证存在于您的模型中(请参阅验证方法的 Backbone 文档)。您的模型包含您将在 View 中显示的所有字段。

现在您需要有关这些字段的信息(您称之为 FormFields)。它们不需要是主干模型，也不需要插入主干集合中。一个普通的 javascript 对象和数组就足够了。在扩展模型时将此信息添加到模型中(字段描述数组)。

从您的模型中实例化您的通用表单 View ，并使用字段描述创建表单。监听输入、选择、文本区域的变化事件并更新你的模型。如果出现验证错误，将在模型上触发“错误”事件，您可以对 View 使用react(显示错误)。