Question

大家好我不知道从集合中显示我想要的东西当我在按钮上添加一些东西按下时zview显示新添加的人。下面是我的代码。

 $(document).ready(function(){

    var Person = Backbone.Model.extend({
        name: 'default name',
        age: 100,
        initialize: function(){
            this.bind('change', this.render, this);
        }
    });

    var PersonCollection = Backbone.Collection.extend({
        model: Person
      });

    var PersonView = Backbone.View.extend({
        el: $('#personEL'),

        events: 
        {
            "click #login-btn" : "loginClick"
        },
        loginClick: function()
        {
          var name = $('#name').val();
          var age = $('#age').val();
          var newPerson = new Person({name: name, age : age});


          this.personCollection.add(newPerson);          
          var showit = new zview();

        },
        initialize: function(){
         this.personCollection = new PersonCollection();

           this.render(); 
        },

        render: function()
        {
                var template = _.template( $("#personInputTemplate").html(), {} );
        this.el.html(template);
        }
    });



     zview = Backbone.View.extend({
        el: $('#personTable'),

       initialize: function()
       {
        model: Person,
        this.render();   
       }
       ,
       render: function()
       {
           var template = _.template( $('#personDisplayTemplate').html(),this.Person.toJSON() );
           console.log(template);
          this.el.html(template);
       }
    });


var persons = new PersonView();

  });

html代码

 <div id="display">
        <table id="personTable">

        </table>
    </div>


<script type="text/template" id="personInputTemplate">
    <p>Person Name<input type="text" id="name" /></p>
    <p>Person Age<input type="text" id="age" /></p>
    <p><button id="login-btn">Save</button></p>
</script>

<script type="text/template" id="personDisplayTemplate">
            <tr>
                 <td><span><%= name ? name : '' %></span></td>
                 <td><span><%= age ? age : '' %></span></td>

            </tr>
</script>


<div id ="personEL"></div>
<div id="showPerson"></div>

任何有关语法和解释的帮助都会受到赞赏。感谢

Answer 1

除了查看kinakuta的评论之外，我还建议您查看以下内容：

首先，你应该从zview中删除以下代码，因为它是无效的javascript。

model: Person,

然后，当您创建zview视图的实例时，您可以将模型作为参数传递，因此您可以替换

var showit = new zview();

使用：

var showit = new zview({model: newPerson});

然后在渲染zview时，您可以直接参考模型。

尝试更换：

var template = _.template( $('#personDisplayTemplate').html(),this.Person.toJSON() );

与

var template = _.template($('#personDisplayTemplate').html(), this.model.toJSON());

至少应该让你开始走上正轨。

如何在骨干中显示模型集合中的视图

1 个答案: