CODEWITHSUNDEEP
javascriptbackbone.js
Joe.wang
Joe.wang

Reputation: 11793

understand Backbone set method and Model

All, I am a newbie of Backbone. and I am trying to understand the Model of Backone. Especially how to define a Model. so far, I didn't saw a clear or formal way about how to define a Model for backbone. For example Let's see the set method in help doc .

set

model.set(attributes, [options])

Set a hash of attributes (one or many) on the model.

Say we have some code like below . I think set method actually is assign a javascript object to the Model. 

    window.Employee = Backbone.Model.extend({

      validate:function(attrs){
        for(var key in attrs){
            if(attrs[key] == ''){
                return key + "can not be null";
            }
            if(key == 'age' && isNaN(attrs.age)){
                return "age is numeric";
            }
        }
      }
    });

    ....
    var attr = {}; // I can't not sure what is {} mean.
    $('#emp-form input,#emp-form select').each(function(){
        var input = $(this);//using jquery select input and select. and enumerate all of them.
        attr[input.attr('name')] = input.val();//I am not sure what does it means
    });
    if(employee.set(attr)){
            Employees.create(employee);
        }
    ....

in this example ,I didn't saw the classical way which we can see in java class or c# class to define the class fields or methods. but only see a validate function .Is there anybody who can tell me more about it to help me understand? thanks.

Upvotes: 0

Views: 3201

Answers (2)

BG Adrian
BG Adrian

Reputation: 485

The model in JS is basically a wrapper for data, with CRUD and simple validation functions. To work properly you need to make server functions to work with (ajax), I think this tutorial says it all http://backbonetutorials.com/what-is-a-model/. Instead of database the model works with your application server side.

If you have custom actions (not just add/edit/remove) on your data, you can manually "set()" data, use "onchange" event and refresh your view when needed. You can even attach "onchange" events only on specific fields and make custom functions in your view to handle each special field (for validation or display).

You can define fields at initialize and defaults value, but not custom functions (ofc you can do model.customFuntion() but I don't recommend it.

In order to make it more "clasical way" you need to use the other Backbone functions http://backbonejs.org/#Collection-Underscore-Methods and Backbone.Collection.

Upvotes: 1

guzmonne
guzmonne

Reputation: 2530

To define a model in Backbone you have to extend the Backbone.Model object. For example if you'll like to create a new User model you could write something like this:

var User = Backbone.Model.extend({})

You can also overwrite some model methods to fill your needs. For example you can change the urlRoot attribute to tell the model where should he fetch the data.

Backbone models contain your data in the attributes attribute. You change those attributes by using the model set method and you can read the value stored in the model using the get method. So if you had some inputs where a user can enter information, for example creating a new user with his name and email and you have a form with a text input for both of them. You could do domething like this:

var user = new User;
user.set('name', $('#name').val());
user.set('email', $('#email').val());
attributes = {
  name: user.get('name'),
  email: user.get('email')
};
user.save(attributes);

There are a lot of ways to re-factor this code to make it look better but it help to see how you could use those methods. You should check the Backbone documentation to explore how they work a little bit more. Hope this helps!

PD: In my example I set an attribute a time, but you could also send a hash of attributes to set more values in one call.

Upvotes: 1

Related Questions