当我单击提交按钮时，在div中显示表单填充数据

Question

我是骨干新手。 我创建一个表单，现在我想在REST服务的前端显示数据。 我的代码是：

范本：

<script type="text/template" id="details">
<ul>
<% _.each(persons, function(person) { %>
<li><label>emailId : </label><%= person.emailId.emailId %></li>
<li><%= person.emailId.emailId %></li>
<% }); %>
</ul>
</script>

模型，集合和视图

<script type="text/javascript">
        var UserModel = Backbone.Model.extend({});

        var EntityList = Backbone.Collection
                .extend({
                    model : UserModel,
                    url : 'http://192.168.1.3:8080/cofinding/business_profile/searchBusiness/123456789'

                });

        var View = Backbone.View.extend({

            el : '#mydiv',
            template : _.template($("#details").html()),
            initialize : function() {
                var self = this;
                this.coll = new EntityList();
                this.coll.fetch({
                    success : function() {
                        self.render();
                    }
                });
            },

            render : function() {
                // the persons will be "visible" in your template
                this.$el.html(this.template({
                    persons : this.coll.toJSON()
                }));
                return this;
            }

        });
        var view = new View();


        </script>

上面的代码显示了我的服务数据。 但是，当我单击提交按钮时，我需要。

Answer 1

假设您的页面上有以下按钮：

<button id="submit">Submit</button>

您的视图将需要定义一个events对象，该对象跟踪用户单击按钮时发生的情况：

var View = Backbone.View.extend({

    events: {
        'click #submit': 'fetchEntityList'
    },

    el: '#myDiv',

    //etc...

 });

然后，您可以定义执行的功能。 它可能应该执行与您当前在initialize类似的操作：

fetchEntityList: function() {
    var self = this;
    this.coll.fetch({
        success : function() {
            self.render();
        }
    });
}

现在，每当用户单击Submit时，都将执行fetchEntityList函数。 它将获取您的EntityList集合并将其呈现在页面上。

Answer 2

大家好，我得到了我想要的结果：

<body>
    <div class="container">
        <h1>User name</h1>
        <hr>
        <div class="page"></div>
    </div>

    <script type="text/template" id="edit-user-template">
    <table  border="1" cellpadding="4">  
      <tr>
            <th>Email Id</th> 
            <th>Is Verified</th> 
          </tr>
        <% _.each(users, function(user) { %>
          <tr>
            <td><%= user.get('emailId').emailId %></td> 
            <td><%= user.get('emailId').isVerified %></td> 
          </tr>
          <tr>
            <td><%= user.get('emailId').emailId %></td> 
            <td><%= user.get('emailId').isVerified %></td> 
          </tr>
        <% }); %>

    </table>

  </script>



    <script>
        var Users = Backbone.Collection
                .extend({

                    url : 'http://192.168.1.3:8080/app/business_profile/searchBusiness/123456789'

                });

        var UserList = Backbone.View.extend({
            el : '.page',
            render : function() {
                var that = this;
                var users = new Users();
                users.fetch({
                    success : function() {
                        var template = _.template($('#edit-user-template')
                                .html(), {
                            users : users.models
                        });
                        that.$el.html(template);
                    }
                })
            }
        });

        var Router = Backbone.Router.extend({
            routes : {
                '' : 'home'
            }
        });

        var userList = new UserList();

        var router = new Router();
        router.on('route:home', function() {
            userList.render();
            //console.log('we have loaded the home page');
        });

        Backbone.history.start();
    </script>

当我单击提交按钮时，在div中显示表单填充数据

问题描述

2 个解决方案

解决方案1
0 2014-02-14 13:46:49

解决方案2
0 已采纳 2014-02-15 12:49:33

当我单击提交按钮时，在div中显示表单填充数据

问题描述

2 个解决方案

解决方案1 0 2014-02-14 13:46:49

解决方案2 0 已采纳 2014-02-15 12:49:33

解决方案1
0 2014-02-14 13:46:49

解决方案2
0 已采纳 2014-02-15 12:49:33