Question

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

模板：

<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 object，以跟踪用户点击按钮时发生的情况：

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

只要用户点击提交，就会执行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 个答案: