Getting BackBone.JS to set up a form and fill in the data

I am very new to backbone and I am trying to get my head around it, but can not figure out what I am doing wrong. I am not using backbones router, I do not need to, I am using PHP Slim to handle all the routes, I am not sure if that is right or not?

But what I have tried to do sort of works and sort of does not. This works fine without any errors:

var TestForm= Backbone.View.extend({
 render: function() {
    var MarkupBit1 = '<form class="testClass">';     
    var MarkupBit2 = '<input value="5" name="ID">'; 
    var MarkupBit3 = '<input value="6" name="Level">';  
    var MarkupBit4 = '<input value="titletest" name="MenuTitle">';  
    var MarkupBit5 = '<input value="pathtest" name="MenuPath">';    
    var MarkupBit6 = '<input type="submit" value="Save">';  
    var MarkupBit7 = '</form>';
    var TotalMarkup = MarkupBit1+MarkupBit2+MarkupBit3+MarkupBit4+MarkupBit5+MarkupBit6+MarkupBit7;
    
    this.$el.html(TotalMarkup);
    return this;
 }
});
 
//Make new view
var viewtest = new AdminEditMenu();


$(document).ready(function(){
       $('#testdump').html(viewtest.render().el);
});

This builds my form and displays this out without any problems at all. But when I try this, it does not work,

 var AdminEditMenu = Backbone.View.extend({
  render: function() {
    var MarkupBit1 = '<form class="AdminMenuEdits">';    
    var MarkupBit2 = '<input value="'+ this.options.myformid +'" name="MenuID">';   
    var MarkupBit3 = '<input value="'+ this.options.myformlevel +'" name="MenuLevel">'; 
    var MarkupBit4 = '<input value="'+ this.options.myformtitle +'" name="MenuTitle">'; 
    var MarkupBit5 = '<input value="'+ this.options.myformpath+'" name="MenuPath">';    
    var MarkupBit6 = '<input type="submit" value="Save">';  
    var MarkupBit7 = '</form>';
    var TotalMarkup = MarkupBit1+MarkupBit2+MarkupBit3+MarkupBit4+MarkupBit5+MarkupBit6+MarkupBit7;
  
    this.$el.html(TotalMarkup);
    return this;
 }

});

var viewtest = new AdminEditMenu({
  myformid : 33,
  myformlevel: 5,
  myformtitle: 'TitleTest',
  myformpath: '/testing'
  });

 $(document).ready(function(){
    $('#testdump').html(viewtest.render().el);
 });

With this I get myformid not undefined within the console.

I have tried adding something like var myformid = null before the backbone view?

I love the idea of backbone, I will just say that their website could do with some more examples, which would make learning it easier.

So What am I doing wrong?

My end goal would be to build a new view object with data held within my database, output this data to a form pre-populated with my database data. Then use .save form backbone to get PHP Slim to to update the data within the db.

Answer

var AdminEditMenu = Backbone.View.extend({
  initialize: function(options) {
    this.options = options;
  },
  render: function() {
    var MarkupBit1 = '<form class="AdminMenuEdits">';    
    var MarkupBit2 = '<input value="'+ this.options.myformid +'" name="MenuID">';   
    var MarkupBit3 = '<input value="'+ this.options.myformlevel +'" name="MenuLevel">'; 
    var MarkupBit4 = '<input value="'+ this.options.myformtitle +'" name="MenuTitle">'; 
    var MarkupBit5 = '<input value="'+ this.options.myformpath+'" name="MenuPath">';    
    var MarkupBit6 = '<input type="submit" value="Save">';  
    var MarkupBit7 = '</form>';
    var TotalMarkup = MarkupBit1+MarkupBit2+MarkupBit3+MarkupBit4+MarkupBit5+MarkupBit6+MarkupBit7;

    this.$el.html(TotalMarkup);
    return this;
 }

});

Adding initialize method and assigning options to this.options should do the job.

Added fiddle. Check it. I removed the other snippet as it doesn’t work.

Advertisement

Answer