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

how to move one view to another view?

本文关键字：视图 一个 移动 另一个      更新时间：2023-09-26

你能告诉我如何从一个页面导航到另一个页面吗?我想展示第二个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

基本上你的按钮应该触发导航，所以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样本。

相关文章：