javascript - 如何向 Backbone 应用程序添加类似 django 的 Formfields?

标签 javascript backbone.js

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

我的要求:

  • 表单元素及其行为的声明性规范(例如所需的真/假、事件……)
  • 所有表单字段的默认 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 类型进行,但这对我来说似乎有点困惑)
  • 如何为每个 FormField 实例设置正确的 View ?

最佳答案

并没有真正发现使用模型来决定 UI 元素...

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

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

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

关于javascript - 如何向 Backbone 应用程序添加类似 django 的 Formfields?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5618602/

相关文章:

javascript - 新手 : Why does this variable persist instead of getting reset?

javascript - 悬停 jquery 时保持子菜单打开

javascript - 将 Canvas 设置为背景 - Javascript

javascript - 将两个 onLoad 脚本合并为一个

javascript - getter 与直接访问模型属性之间的 backbone js 区别

internationalization - 使用多个路由器的优势?

javascript - 在不影响其他类似对象的情况下删除 ng-repeat 中的对象

javascript - 相关的 Backbone.js View 应该相互引用,还是仅通过事件进行讨论?

javascript - this.$el 和 jQuery

javascript - 在不发出额外请求的情况下获取 Backbone 模型父关系