我的骨干模型视图doesnt工作

-1

下面的例子，我已经写了使用backbone.js不起作用。我希望我在文本框中输入的单个记录显示在emp列表ul中。有人可以帮忙吗。谢谢inadvance。我的骨干模型视图doesnt工作

EmpForm.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"/> 
     <title>Emp Form (Backbone.js)</title> 
    </head> 
    <form id="empform" align="center" border="1"> 
     Enter Emp Name:<input type="text" id="empname" placeholder="Enter emp name" size="20"/><br> 
     &nbsp;&nbsp;&nbsp;&nbsp;Enter Emp Job:<input type="text" id="desig" placeholder="Enter emp designation" size="20"/><br> 
     <button id="addrecord">Add Record</button> 
     <hr> 
     <ul id="emplist"> 
     </ul> 
    </form> 
    <script id="emptemplate" type="text/template"> 
     <span><strong><%= empname %></strong><blockquote><%= desig %></span> 
    </script> 
<!-- <script type="text/javascript" src="./jslib/underscore1.5.0.js"></script> 
    <script type="text/javascript" src="./jslib/jquery1.9.1.js"></script> 
    <script type="text/javascript" src="./jslib/backbone1.0.0.js"></script> --> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script> 
    <script src="http://code.jquery.com/jquery-1.9.0.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script> 
    <script type="text/javascript"> 
     (function(){ 
      EmpModel = Backbone.Model.extend({ 
       defaults:{ 
        empname:'guest emp', 
        desig:'some work' 
       } 
      }); 
      EmpView = Backbone.View.extend({ 
       tagName:'emplist', 
       template:_.template('emptemplate'), 
       events:{ 
        'click #addrecord':'addRecord' 
       }, 
       addRecord:function(){ 
        this.render(); 
       }, 
       render: function() { 
       this.$el.html(this.template(this.model.toJSON())); 
       return this; 
       } 

      }); 
      var empModel=new window.EmpModel({empname:'sree',desig:'architect'}); 
      var empView=new window.EmpView({model:empModel});    
      $(document.body).append(empView.render().el); 
     })(); 
    </script> 
</html>

来源

2014-08-30 sree

嘛。首先，你一定要回顾http://backbonejs.org/，并且通常会用JavaScript来练习更多。但下面应该让你开始：

var EmpModel = Backbone.Model.extend({ 
    defaults:{ 
     empname:'guest emp', 
     desig:'some work' 
    } 
}); 
var EmpView = Backbone.View.extend({ 
    tagName:'form', 
    el: '#empform', 
    template: _.template($('#emptemplate').html()), 

    events:{ 
     'click #addrecord':'addRecord' 
    }, 

    addRecord:function(){ 
     var empname = $('#empname').val(); // not the best way to do this, btw 
     var desig = $('#desig').val(); // same thing... 
     var newModel = new EmpModel({empname: empname, desig: desig}); 
     this.render(newModel); 
    }, 

    render: function(model) { 
     this.$el.find('#emplist').append(this.template(model.toJSON())); 
     // can also use '... .html(this.template(model.toJSON()));' 
     return this; 
    } 
}); 
var empModel = new EmpModel({empname:'sree',desig:'architect'}); 
var empView = new EmpView(); 
empView.render(empModel);

同时添加type="button"到添加记录按钮。

请参阅fiddle。干杯!

来源

2014-08-30 13:38:00 bowheart

我的骨干模型视图doesnt工作

回答

相关问题