获取BackBone.JS以设置表单并填写数据

时间:2014-03-25 16:22:25

标签: javascript php jquery backbone.js javascript-events

好吧,我对骨干很新,我正试图解决它,但无法弄清楚我做错了什么。我不是使用骨干路由器,我不需要,我使用PHP Slim来处理所有路由,我不确定这是否正确?

但我试图做的有点工作而有点不做。这样可以正常运行,没有任何错误,

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);
});

这会构建我的表单并显示出来而没有任何问题。但是,当我尝试这个时,它不起作用,

 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);
 });

有了这个,我在控制台中没有定义myformid。

我尝试在骨干视图之前添加 var myformid = null 之类的内容吗?

我喜欢骨干的想法,我只想说他们的网站可以做更多的例子,这将使学习更容易。

那我做错了什么?

我的最终目标是使用我的数据库中保存的数据构建一个新的视图对象,将此数据输出到预先填充了我的数据库数据的表单。然后使用.save form backbone来获取PHP Slim以更新db中的数据。

非常感谢

格伦。

1 个答案:

答案 0 :(得分:1)

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;
 }

});

添加initialize方法并为this.options分配选项应该可以胜任。

添加了fiddle。核实。我删除了其他代码段,因为它不起作用。