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

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

backbone.js requirejs

如何在运行时用backbone.js中的另一个视图替换视图,backbone.js,requirejs,Backbone.js,Requirejs,我正在尝试用twitter API构建backbone.js应用程序。我正在使用的应用程序执行3项任务：1-返回用户时间线上最近的tweet，2-返回用户配置文件3-提供在twitter中搜索的功能。我的问题是，当用户单击搜索按钮时，我希望搜索功能的结果显示在tweet的位置。在我的代码中，有一个视图显示tweets，另一个视图显示搜索结果。如何在运行时将视图放置在另一个视图的位置。下面是一些代码来解释这个想法： index.html： <body> <header

我正在尝试用twitter API构建backbone.js应用程序。我正在使用的应用程序执行3项任务：1-返回用户时间线上最近的tweet，2-返回用户配置文件3-提供在twitter中搜索的功能。我的问题是，当用户单击搜索按钮时，我希望搜索功能的结果显示在tweet的位置。在我的代码中，有一个视图显示tweets，另一个视图显示搜索结果。如何在运行时将视图放置在另一个视图的位置。下面是一些代码来解释这个想法： 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', '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; 
   });

有人能帮我做我想做的事吗

不要在任何视图中使用

el:'#id'

，让视图创建和管理自己的

el

s。调用者根据需要将视图添加到容器中，并在添加新视图之前调用旧视图。帮自己一个忙，使用木偶。布局将很好地满足您的需求，您将删除大部分代码。谢谢您的回答。但是如何让视图创建和管理自己的el？我在脊梁骨方面没有多少经验。你能详细解释一下如何在代码中做到这一点吗？比如我应该在代码中修改什么才能正确工作？@mu太短了，我读过关于木偶的书，但直到现在我还不能完美地使用它，所以你有没有一个解决方案可以在我当前的代码中使用？？也许当我学习更多关于木偶的知识时，我会使用它

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