2015-10-07 302 views
2

可否请你告诉我如何从一个页面导航到另一个主页。 我想显示按钮第二HTML点击它是如何可能如何将一个视图移动到另一个视图?

我那么喜欢这样的

events: { 
     'click #click':'moveTonext' 
     }, 

     moveTonext: function(){ 
      alert('---') 
     }, 

说。我电阻事件我做第二页这样的

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/second.html' 
], function ($, _, Backbone, statsTemplate) { 
    'use strict'; 

    var secondView = Backbone.View.extend({ 

     // Instead of generating a new element, bind to the existing skeleton of 
     // the App already present in the HTML. 
     el: '#todoapp', 

     // Compile our stats template 
     template: _.template(statsTemplate), 

     // Delegated events for creating new items, and clearing completed ones. 
     events: { 

     }, 



     // At initialization we bind to the relevant events on the `Todos` 
     // collection, when items are added or changed. Kick things off by 
     // loading any preexisting todos that might be saved in *localStorage*. 
     initialize: function() { 
      this.render(); 
     }, 

     serialize: function() { 
      return { 
      message: 'world' 
      }; 
     }, 

     // Re-rendering the App just means refreshing the statistics -- the rest 
     // of the app doesn't change. 
     render: function() { 
      this.$el.html(this.template()); 
     } 
     // Add a single todo item to the list by creating a view for it, and 
     // appending its element to the `<ul>`. 



    }); 

    return secondView; 

}) 

另一个HTML

<h1>second</h1> 

这里是我的猎人 http://plnkr.co/edit/fCXwSrroJP1l6BppjpmD?p=preview

回答

0

基本上你的按钮会触发导航,所以click处理程序应该是这样的:

moveToNext: function() { 
    router.navigate("other/path", { trigger: true }); 
} 

然后,在你router代码,你需要添加一个路由处理程序对上述路径:

routes: { 
    "other/path": "handleOtherPath" 
}, 

handleOtherPath: function() { 
    new SecondView(); 
} 

这是针对SecondView应取代FirstView的情况。如果应该添加以下机制,则可以使用以下机制:

moveToNext: function() { 
    new SecondView({ el: this.$(secondViewContainerSelector) }); 
} 

这是Plunker sample的工作。

+0

请问您可以给予活板.. – user944513

+0

请提供活塞或编辑活塞 – user944513

+0

@ user944513我更新了答案以包含链接到活塞。 – Dethariel

相关问题