CODEWITHSUNDEEP
javascriptjquerybackbone.js
Chris M
Chris M

Reputation: 4115

How to deal with dynamic properties in Backbone and sync to database

I have been struggling with Backbone the last few days in trying how to best approach dealing with some dynamic elements added by a user and sync those successfully with the database. I have one model and one view.

The model created is fairly straightforward, it represents a product(t-shirt) in a database and has the attributes: id, price, size, brand, colors.

The problem I am faced with is the colors attribute. The colors cannot be pre-populated by design (unfortunate as it may be) to allow for the user to enter any custom color and name it as freely as they want. In addition to the name, the user has to specify if the color is available. Clicking the Add Text button/link will have an input field and dropdown appended to the div below.

My question: What is the best way to add these multiple color properties as ONE attribute of the model?

I need to have all the colors/availability values as one property when it attempts to insert or update itself with the API as the colors property and goes into one row in the db (mysql). I believe the backend programmer has this row configured as a type of TEXT.

e.g.

{"colors": [{"blue":true},{"orange":false},{"white":false}]}

My thinking is that I need to obviously have some sort of nested JSON within the model but I can't figure out how to write this properly. Any help or something to point me in the right direction would be much appreciated.

enter image description here

Upvotes: 2

Views: 184

Answers (1)

Loamhoof
Loamhoof

Reputation: 8293

Ok, this solution involves jQuery maybe a bit too much, but should work fine. Basically, listen to both changes of your color textboxes and select:

events: {
  'change .colorText': 'setColor',
  'change .colorSelect': 'setColor'
},
setColor: function() {
  // here make your `color` attribute's array
  var colors = [];
  this.$('.colorText').each(function() {
    var val, color;
    // adapt the next to navigate to the corresponding select...
    (val = $(this).val()) && (((color = {})[val] = $(this).next().val()) || 1) && colors.push(color);
  });
  this.model.set('colors', colors);
}

Upvotes: 2

Related Questions