powmedia / backbone-forms Goto Github PK

There's a few issues I'm trying to overcome here with the html layout of the forms generated. I'd like to be able to group fields together into fieldsets, add headings and help text to those fieldsets and on some occasions even produce a custom template for where the editors/fields should appear.

It would be nice if the html outputted complied with the uni-form standard (http://sprawsm.com/uni-form/). I've used the django plugin for this quite a lot and it's really easy to adapt to your needs. It also comes with some pretty css for free which is always good.

I'm quite happy to do some development on this, I just wanted to get some opinions before I dive in and diverge. Is there a mail list or IRC for backbone-forms anywhere?

will be nice to have support for this 2, right now im using a select to display just 2 choices :)

When using CustomEditors as functions in shorthand form does not work (i.e. passing in the constructor functionin shcema):

var schema = {
  works: { type: CustomEditor },
  doesntWork: CustomEditor
};

I just spent an hour debugging why a form didn't show up and it turns out that I had used Textarea instead of TextArea.

So I was wondering a few things:

• Could these names be normalized (lower-case) in the class code and input is run through .toLowerCase()?
• Could you guys test if the schema used actually exists (somewhere along the lines of defensive coding), because otherwise the page dies with undefined is not a function.

I use brunch to build the app.js file

This error occurs:

http://yfrog.com/z/hs855kp

This is my html file
https://gist.github.com/1774212

backone version is 0.9.1.

Why this error occur?

When calling commit() on a form with more than one updated field, change is triggered on the associated model for each changed attribute.

Backbone allows you to set() many attributes at once on a model. I think this triggers one change event, even when more than one attribute is updated. This allows you to listen to the change event on a model and fire a function.

Should we build a hash of attributes to change and set them all at once in the commit() vs once per field?

My current use case is having a SearchForm with an associated SearchRequestModel. A ResultsCollection references an instance of the SearchRequestModel and has a function bound to the change event that calls a fetch, using the SearchRequestModel's attributes as the parameters to send in the fetch.

Basically, when "submitting" the form, I call commit() on the form, triggering the change on the request model, which triggers the collection's fetch.

Hi there,

There are some unneeded commas which would throw some errors in old msie browsers i think.

550 - after 'textarea'
740 - after }
793 - after }

Best regards

martin

I must be missing something...

I'm trying to create a Backbone form for a new instance of a particular model which has a schema defined, but because it's not saved yet it doesn't have an ID. After scanning through the README I don't see a way to actually do this.

What do I need to specify for the model parameter when calling new Backbone.Form({model: ????})

(I've tried this.model but that just results in a 'can't find schema' error.)

See here:
http://jsfiddle.net/4XZMb/188/

Note the console: notes (as a simple List) comes out the same as it goes in, but weapons (as a NestedModel list) does not.

Bug or am I missing something?

For use with Object and NestedModel itemTypes in new List editor

I'm using your AMD compatible backbone-forms.amd but can you let me know the recommended way to include list.js with that?

Also it's hard to NOT use your AMD-compatible version. If I wanted to use the non-amd version using a RequireJS shim it's hard because your non-amd version checks for the existence of the "require" function :(. If you just want to detect "is this a browser" would be better to check FOR a window object.

Similarly to the Password editor, the Text editor should have "$(this.el).attr('type', 'text');" when initializing.

Something like:

form.on('email:change', function() {...});

form.trigger('email:change');

There is no real <form>, but the enter button should submit the popup dialog when adding a new item to a List

Hi,

Help me please.

I have:
schema: {
item: {
type: 'NestedModel',
model: Item.Model
},
text: { type: 'TextArea',validators: ['required'] }
}

I want to change a field in item fields,

this.form.setValue({item:{position_x:5,position_y:6}})

This action reset all other fields for item nested model (name, color, shape etc.)

How I can do this?

Thanks!

Thanks for this library.

I’m making use of it in a project, and I extended Backbone.Form.editors.Base to create an Autocomplete editor that uses jQuery UI’s autocomplete. Usage example:

class Move extends Backbone.Model
  schema:
    person_id:
      title: "Person"
      type: "Autocomplete"
      collection: "Roster.people"

It works nicely, and I’m hoping to be able to contribute this back to the community (tests already written), but there’s a design flaw: the mechanism of specifying the data source.

I originally passed the collection in directly, but then I ran into loading order problems. Now it uses the dreaded eval to find the collection. It’s okay for my purposes, but wouldn’t be happy releasing it that way for general usage. Apart from being a poor solution, it’s also limited in that there can only be one backing collection, so I can’t use, say, a subset of the People collection if I need to.

Does anyone have thoughts on how I can make a clean interface so other people can integrate this type of editor? Is it just not a good fit for the design of Backbone Forms? Here are ideas I’ve considered and why I think they don’t work:

• passing in a function for the data source: editor could then only find objects in global scope
• specifying a datasource or something that could be passed in when constructing the Form: an Editor has no access to the Form that contains it

An extra benefit for me to solving this would be that I can add validation that depends on an entered value being in a collection determined at runtime.

I debated whether this was the venue for this sort of question or whether Stack Overflow was better. Sorry if I chose incorrectly.

Required in case a form is submitted via normal browser POST

Option 1:

• Nested inputs prefixed with the main field name

Option 2:

• No name attribute on nested fields, but have a hidden input with the main field name, that contains the value for the object/nested model

It would be useful to have an option of live model bindings to form. It would be real MVC .

Hi!

My model has a field of type File. How can I organize a file upload through backbone-forms? Is it possible? Point me in the right direction please. I'm using django-tastypie.

Thanks,
Vitaliy

I've been using backbone-forms to make forms for iOS, so there's a significant use of <input type="blah"> where blah can be tel, email etc.

At the moment you have to make a subclass of editors.Text and set the type (in the same way as editors.Password works). It would be nicer if you can pass a type attribute or similar to override it on a editors.Text instance. Alternatively, we should go through the list of html input types and provide them all.

• Simple form
• Complex form
• jQuery UI editors
  • Using List editor by itself for managing collections
• Custom templates
• Custom editor

Just played with both examples and discovered weird behavior described in title. But I didn't try to use this lib in my own script so it could be a bug of example code .

On the setValue an empty string from a default will come up as NaN when the form loads.

Perhaps we can add near line 1050:

if(_.isNaN(value)) value = null;

But maybe it can be integrated into this line:
value = value === null ? null : parseFloat(value, 10);

But I'm not sure how.

Hi,

Is there any way to nest a form inside of a list?

For example:

schema: {
people: {
type: 'List',
'LISTFIELDS' => 'firstname, lastname, city, state'?
}
}

Is there any way to do something like the above?

Thanks a bunch!

Hi,

I use brunch.io and I would like use backbone-forms but I've got two error with Require.js

Uncaught Error: Cannot find module 'jquery'
Uncaught TypeError: Cannot call method 'template' of undefined

Someone can help me ?

Hi, I'm having trouble making help and validation error text displaying. Is this working? If so, could you provide an example?

thanks in advance,
Seth

Aside from backbone, it seems jquery-ui is needed heavily for certain editors.

Can you list the exact dependencies in the readme (for jquery-ui and jquery)?

First of all,
thanks for this precious tool, it works fine and it was very helpful for my application.

I would propose a little change on lists, which maybe would make things even more usable.

Elements in a list are shown as span elements. When the user needs to add/delete/modify a popup is opened with jquery-ui. The popup is not always the best solution, sometimes it's not nice, sometimes it can raise up troubles (for instance if the form is already in a popup box, then you must open the jquery dialog as a child of the popup box).

Maybe a good solution is not to show list elements as 'span' but as input fields with the 'delete' icon on the right. And when hitting the 'add' button, simply an input row is added.

Does it make sense?
good bye.
Daniele

`backbone-forms' is ready for AMD (with requirejs, it works well).

What about list.js editor ?

When using type Number the text input should not preventDefault on backspace, delete, arrow etc.

I changed near line 938 as follows:

var char = String.fromCharCode(event.charCode);
//check for backspace, arrows, etc...
if( event.charCode <= 46 ) char = "";

var newVal = this.$el.val() + char;

backbone-forms.js is now over 1000 lines long, even longer than core.js in jQuery. It would be nice to separate Form, Field, helpers, validators, Editors etc out in to separate js files, despite their interdependency and create a script which builds the file into a single, minified js file for deployment.

We could also then provide versions with/without the jQuery dependant editors, and a version packaged as a require.js module.

If you have multiple forms that have some attributes with the same name, then elements with duplicate IDs are created. Perhaps the form element IDs should be prefixed with the model id/cid?

It'd be nice if there was an easy way to have different Forms use different templates. For example, you might want a bootstrap template that is a .form-horizontal and a .form-vertical (right now bootstrap.js hardcodes in .form-horizontal), but you also might want much more extreme changes.

Could work like:

this.form = new Backbone.Form({
  model: this.model,
  template: 'custom_form1' 
});

Hi Charles,

First off, I'm enjoying this library a great deal so far - it fills a definite gap in Backbone usage. Thanks for getting the ball rolling. I have a few questions, so I'll open different issues for each.

In general, the markup generated by a Backbone.Form instance is more like a set of fields (a fieldset?), than a whole form; it has a root <ul> tag rather than <form>, and doesn't yet have facility to including a submit button or cancel button/link. I find myself wrapping it inside another Backbone view class that provides the encloding <form> element and input buttons, but it would be nice if a Form instance could provide all the markup for a <form>. What do you think?

Hello,

I'm trying to implement a form with a Model A which has many Model B.
I want to reproduce schema of Model B as many times as necessary in Model A form. In fact, I want to do something similar to this railcast : http://railscasts.com/episodes/196-nested-model-form-part-1

Is it possible so far with backbone-forms ? What is the recommended practice ?

Thanks!

It's a valid symbol in email addresses

See the mini-project reproducing the issue

there is currently no way to distinguish between file versions other than doing a file diff.

so could you add a docblock like this:

//
// Backbone-Forms v*.*.*
// 
// 
// Copyright (c) etc.
// Licensed under the etc...License.
//

When I try and use an object editor for an object property of my model I get:

Uncaught Missing required 'schema.subSchema' option for Object editor

I would expect to see some kind of key value pair editor where I can edit each property of the object and add or remove properties.

Hello,

First off, thank you for creating backbone-forms. I've forked it and have run into a problem with DateTime. Not sure if I'm just not getting it or its a bug. The exact error i'm getting is with DateTime in the schema.

"Uncaught TypeError: Cannot call method 'getHours' of undefined"

You can clone my fork here to reproduce. https://github.com/jamescharlesworth/backbone-forms. Just load the index.html page and you should see the error.

Thank you,

James

A while ago, I started a fork of this rep to implement its features on existing form so it doesn't only generate forms but take existing ones and apply validation, plugins... (I can't really do a pull request as it was too long ago and it would be more complicated to merge than to rewrite the code).

Would you be interested in this feature? I'd be happy to write the code. It basically adds a el attribute - a jquery object or a selector - to the schema definition. So you can do any of this:

      schema: {
        name:      $('#foo'),
        email:     '#email',
        start:     { el:  $('#start') },
        end:       { el:  '#start' }
    }

It automatically detects what the input is and set the rest of the schema accordingly. Though it can be overwritten by being explicit in the schema definition.

Re-rendering the Form actually appends the form markup to its element, it doesn't clear its element's markup before re-rendering.

Generally, I would expect it to clear before re-rendering. Do you have a strong preference for it to not do that?

Currently if implementing an autosave feature, you'd have to do something like

$( form.el ).live( 'input, select', 'change', function( event ) {
  form.commit()
  ...
})

However this is somewhat tedious, and it doesn't easily allow you to "watch" when lists have items added, etc...

It would be great if there was a way to observe the form object for user changes.

It seems that the nested models are not being "committed" from the List modal. This means that if the schema does not contain validation but the model does, the nested modal will be saved to the main model even though it is not valid (on the model).

Seems like an easy enough fix, we just force the embedded model to commit. Near line 392 in jquery-ui-editors:
var saveAndClose = function() {
var errs = editor.validate();
if (errs) return;

    //validate against the model too
    if(listType == "NestedModel"){
        errs = editor.commit();
        if (errs) return;
    }

However, the NestedModel editor has this line in its commit function near line 1500 in backbone-forms.js. This will kick an error from the modal.

return editors.Object.prototype.commit.call(this);

Any ideas on how to insure the List jquery-ui-editor for NestedModels will validate against the model?

Numeric editor has invalid char processing. It does not works at all.

Line 624:

You should replace event.keyCode to event.charCode

When the attribute is null, I would expect the value to be blank.

Hi,

https://github.com/PaulUithol/Backbone-relational

ItemText.Model = Backbone.RelationalModel.extend({

    schema: {
        item:  {
            type: 'NestedModel',
            model: Item.Model
        },
        text:  { type: 'TextArea',validators: ['required'] }
    },
    relations:[
        {
            type:Backbone.HasOne,
            key:'item',
            relatedModel:Item.Model,
            includeInJSON:true
        }
    ]
});

Schema for Item didn't work. Because relational change model attributes. See...

Without backbone-relational

attributes: Object
    id: "25"
    item: Object
        id: "25"
        layer: "/api/v1/layers/46/"
        name: "XXXXXXXXXXXX"
        position_x: 23
        position_y: 27
        position_z: 0
        resource_uri: "/api/v1/items/25/"  
        __proto__: Object
    resource_uri: "/api/v1/texts/25/"
    text: "qqqqq"

With backbone relational:

attributes: Object
    id: "25"
    item: Object
        attributes: Object
            id: "25"
            layer: "/api/v1/layers/46/"
            name: "XXXXXXXXXXXX"
            position_x: 23
            position_y: 27
            position_z: 0
            resource_uri: "/api/v1/items/25/"
            __proto__: Object
        changed: Object
        cid: "c16"
        collection: Object
        id: "/api/v1/items/25/"
        __proto__: Object
    resource_uri: "/api/v1/texts/25/"
    text: "qqqqq"