2014-02-14 2 views
0

Я новичок в позвоночнике. Я создаю форму. Теперь я хочу показать данные в передней части с помощью службы отдыха. мой код:Показать форму заполненных данных в div, когда я нажал кнопку отправки

Шаблон:

<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> 

Приведенный выше код показывает мои данные от службы. Но мне нужно, когда я нажимаю кнопку отправки.

ответ

0

Привет ребята я получил свой результат, что я хочу:

<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> 
0

Допустим, у вас есть следующие кнопки на странице:

<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 и отображать ее на странице.

Смежные вопросы