Question

我正在尝试使用twitter API构建backbone.js应用程序。我正在处理的应用程序执行3个任务：1 - 返回用户时间轴上的最新推文，2 - 返回用户配置文件3-提供在twitter中搜索的功能。我的问题是，当用户点击搜索按钮时，我希望搜索功能的结果显示在推文的位置。在我的代码中有视图显示推文和另一个视图来显示搜索结果。如何将视图放在运行时的另一个视图的位置。这里有一些代码来解释这个想法： index.html：

  <body>
   <header role="banner">
   <!—some code here-->       
   </header>
   <div id="search" class="inner-search">
             <form>
             <label>Search for</label>
     <input type="search" id="searchbox" style="width: 70%;" 
                    autofocus="" placeholder="I'm looking for.."/>
                <button id="searchbutton" style="width: 10%;">Go</button>
            </form>
         </div><!--search-view-->
   <div class="inner-content">
    <nav role="navigation">
        <ul class="chapter-list">
                ………            
        </ul>
    </nav>
    <div role="main" class="main-content metrouicss">
        <div id='timeline' class='timeline-view'>
             <h3>Tweets </h3>
         </div>
    </div><!--main-->

  <div role="right" class="right-content">
     <h3>My Profile </h3>
     <div id="profile" class="profile-view">
     <!-- This would be the template -->                                
     </div></div><!--right-->
  </div> <!-- /.content-wrapper -->
  <footer role="contentinfo">
    <div class="inner-footer">
        <p class="copyright">&copy; Eva Hriekes, 2015. All rights 
  reserved.</p>
    </div> <!-- /.inner-footer -->
  </footer>
  <!-- Template for profile -->
  <script type="text/x-handlebars-template" id="profile-template">
  <div class='tiles clearfix'>
    <div class="tile double bg-color-orangeDark">
      <div class="tile-content">
          <img src="{{user.profile_image_url}}" class="place-left">
          <h3 style="margin-bottom: 5px;">{{user.name}}</h3>
          <p style="float:left;">{{user.description}}</p>
          <div class="brand">
              <div class="badge">{{user.followers_count}} Followers</div>
          </div>
      </div>
    </div>
  </div>
</script>
  <!-- Template for timeline -->
  <script type="text/x-handlebars-template" id="timeline-template">
   <ul class='listview fluid'>
      {{#each tweet}}
    <li >
        <div class='icon'>
            <img src='{{user.profile_image_url}}'></img>
        </div>
        <div class='data'>
              <h4>{{user.name}}</h4>
              <p>{{format text}}</p>
              <p class="timestamp" style="text-decoration:underline;">
              <i>{{friendlyDate}}</i></p>
              <p style="font-weight:bold;">Rating:&nbsp;
              <i class="fa fa-star-o"></i><i class="fa fa-star-
              o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-
              o"></i><i class="fa fa-star-o"></i></p>
        </div>
    </li>
      {{/each}}
    </ul>
    </script>

   <!-- Template for search results -->

   <script type="text/x-handlebars-template" id="search-template">
   <ul class='listview fluid'>
      {{#each tweet}}
    <li >
        <div class='icon'>
            <img src='{{user.profile_image_url}}'></img>
        </div>
        <div class='data'>
              <h4>{{user.name}}</h4>
              <p>{{format text}}</p>
              <p class="timestamp" style="text-decoration:underline;">
     <i>{{friendlyDate}}</i></p>
        </div>
    </li>
      {{/each}}
  </ul>
  </script>

  <script data-main="js/main" src="js/vendor/require.js"></script>

  </body>
 </html>

时间表视图：

     define(['jquery', 'handlebars', 'backbone', 'app/collection
     /Timeline','app/view/ProfilePopupView'],
     function($, Handlebars, Backbone, Timeline,ProfilePopupView) {

     var com = com || {};
     com.apress = com.apress || {};
     com.apress.view = com.apress.view || {};

     com.apress.view.TimelineView = Backbone.View.extend({

      el: '#timeline',

    template: Handlebars.compile($("#timeline-template").html()),

    timeline: null,
    events: {
    'click .profile': 'showDialog'
     },

     initialize:  function(options){
    var self = this; 

    //create a collection for this view to render 
    self.timeline = new Timeline();//new
   com.apress.collection.Timeline();
    //initial render 
    self.render();

    //force the fetch to fire a reset event
    self.timeline.fetch({reset:true 
        });

    self.listenTo(self.timeline, 'reset', self.render);

  },

render: function(){
    var self = this; 
    if(self.timeline.models.length > 0){
        var output = self.template({tweet: self.timeline.toJSON()});

        self.$el.append(output);            
    }
    return self; 
},
showDialog: function(options){

    var self =this, 
        $target = $(options.currentTarget),
        username = $target.data('user'); 

    /** 
     * Reuse the profile view
     **/
    var profileView = new ProfilePopupView({user: username});

}

 });


// export stuff:
return com.apress.view.TimelineView;
});

搜索视图：

define(['jquery', 'backbone'], function($, Backbone) {

var com = com || {};
com.apress = com.apress || {};
com.apress.view = com.apress.view || {};

com.apress.view.SearchView = Backbone.View.extend({

el: '#search',

model: null,

events: {
     'click #searchbutton': 'runSearch'

},

initialize:  function(options){
    var self = this; 
    self.model = options.model;
},

runSearch: function(e){
    var self = this;
        query = $('#searchbox').val();

    e.preventDefault();

    console.log('Run search against  ' +  query);
    //force a reset
    self.model.set('query', '', {silent: true});
    self.model.set('query', query);
}


});

return com.apress.view.SearchView; 
});

结果视图：

define(['jquery', 'backbone', 'handlebars','dialog'], function($,
 Backbone, Handlebars,Dialog) {

 var com = com || {};
 com.apress = com.apress || {};
 com.apress.view = com.apress.view || {};

com.apress.view.ResultsView = Backbone.View.extend({

el: '#results',  /* or should be el="#timeline"???*/

model: null,


template: Handlebars.compile($("#search-template").html()),

initialize:  function(options){
    var self = this; 
    self.model = options.model;

    self.model.fetch({
            error: function(e){
                self.model.trigger("app:error", {message: 'Error
   retrieving timeline information'});
            }, 
        success: function(e){
                self.model.trigger("app:success", {message: 'success 
   retrieving timeline information'});
            }

    });

    self.listenTo(self.model,'change', self.render);

    self.render();
  },

 render: function(){
    console.log('Display now');
                        var self = this,
    output = self.template({tweet: self.model.get('statuses')});

      /* I want to delete this code and display the results
     in the place of tweets*/
    $.Dialog({
            'title'       : 'Search Results',
            'content'     : output,
            'draggable'   : true,
            'overlay'     : true,
            'closeButton' : true,
            'buttonsAlign': 'center',
            'keepOpened'  : true,
            'position'    : {
                'zone'    : 'left'
            },
            'buttons'     : {
                'OK'     : {
                    'action': function(){}
                }
            }
        });

            }   

     });
    return com.apress.view.ResultsView; 
   });

任何人都可以帮我做我想做的事吗？

如何在运行时使用backbone.js中的另一个视图替换视图

0 个答案: