當我單擊提交按鈕時，在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