如何将一个视图移动到另一个视图?

时间:2015-10-07 10:28:19

标签: javascript backbone.js backbone-views backbone-routing

您能告诉我如何在骨干网中从一个页面导航到另一个页面。 我想在按钮上显示第二个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

1 个答案:

答案 0 :(得分: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