如何向 Backbone 应用程序添加类似 django 的 Formfields？
我正在backbone.js 中开发一个单页应用程序，它使用大量html 表单来收集用户输入。 为了节省编码时间，我想要一个类似于 的 FormField 模型/集合Django 的表单字段
我的要求：
- 表单元素及其行为的声明性规范（例如，必需的真/假、事件等）
- 所有表单字段的默认视图/模板（但可通过配置覆盖）
- 属于以下的所有字段表单应存储在一个 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 实例？
I'm developing a single-page-app in backbone.js, that uses a lot of html forms to collect user input.
To save coding time, I'd like to have a FormField model/collection similar to Django's Form fields
My requirements:
- declarative specification of the form elements and their behaviour (e.g. required true/false, events,...)
- default views/templates for all form fields (but overrideable through configuration)
- all fields belonging to a form should be stored in one Backbone.Collection for easier field retrieval
- validation of the entire form or individual elements
Here is what my simple form field implementation might look like:
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(){
}
}
});
However, I ran into the following issues:
- A
Backbone.Collectioncan only host Models of the same type. What is the best way to store different form fields in one collection?
(My approach is to use just oneFormFieldclass, all differentiation happens based on the formfield type in the initialize() method, but this seems a bit messy to me) - How can i setup the correct view for each FormField instance?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
没有真正发现使用模型来决定 UI 元素...
保持模型干净。仅通过后端进出应用程序的数据。您的验证存在于您的模型中（有关验证方法，请参阅主干文档）。您的模型包含将在视图中显示的所有字段。
现在您需要有关这些字段（您称之为 FormFields）的信息。它们不需要是主干模型，也不需要插入到主干集合中。一个简单的 JavaScript 对象和数组就足够了。在扩展模型时将此信息添加到模型中（字段描述数组）。
从模型实例化通用表单视图并使用字段描述创建表单。监听输入、选择、文本区域的更改事件并更新模型。如果出现验证错误，模型上将触发“错误”事件，您可以对视图做出反应（显示错误）。
Not really found of using model to dictate UI elements...
Leave your model clean. Only data that goes in and out of your application through your backend. Your validation lives in your model (see backbone documentation for the validation method). Your model contains all the fields that you will show up on your view.
Now you need information on those field (what you call FormFields). They do not need to be a backbone model and they do not need to be inserted in a backbone collection. A plain javascript object and array would suffice. Add this information to your model as you extend it (array of field descriptions).
Instantiate your generic form view from your model and create the form using the field descriptions. Listen for change events on the inputs, selects, textareas and update your model. If a validation error shows up, an "error" event will be triggered on the model and you can react on your view (show the error).
我已将 Django 的表单库移植到 JavaScript，名为 newforms - 目前这是一个非常直接的移植，可以创建表单字段作为 DOM 元素或 HTML，但尚未对 DOM 或事件进行任何绑定。
我不熟悉 Backbone.js，但如果它使任务变得更容易，我有兴趣了解它是如何做到这一点的。我宁愿提供有用的帮助程序，让人们可以按照自己的意愿设置绑定，而不是强制采用特定的使用模式并在此过程中重新发明一堆轮子。
I've ported Django's forms library to JavaScript as newforms - it's a pretty direct port at the moment, which can create form fields as DOM elements or HTML, but doesn't do any binding to the DOM or events yet.
I'm not familiar with Backbone.js, but if it makes the task easier, I'd be interested to hear about how it does so. I'd rather provide useful helpers which keep it open for people to set up binding as they wish rather than forcing a particular pattern of usage and reinventing a bunch of wheels in the process.
您可以尝试使用backbone-forms.js https://github.com/powmedia/backbone-forms
You can try with backbone-forms.js https://github.com/powmedia/backbone-forms