Question

我使用backbone.js编写的以下示例不起作用。我希望我在文本框中输入的单个记录显示在emplist ul中。请有人帮忙吗。非常感谢。

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>

Answer 1

好。首先，您一定要查看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。干杯！

我的骨干模型视图不起作用

1 个答案: