1

ページにブートストラップ ナビゲーション ピルがあります。

これはコードの一部です: 

  <ul class="nav nav-pills offset3">
    <li class="active">
      <a href="#alphabetical" class="alphabetical_tab" data-toggle="pill"> 
        Поиск по алфавиту 
      </a>
    </li>
    <li>
      <a href="#name_search" class="name_search_tab" data-toggle="pill"> 
        Поиск по имени 
      </a>
    </li>
    <li>
      <a href="#new_characteristic" data-toggle="pill" class="new_category_characteristic">           
        Создать характеристику 
      </a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="alphabetical" class="tab-pane active">
      content 1
    </div>
    <div id="name_search" class="tab-pane">
      content 2
    </div>
    <div id="new_characteristic" class="tab-pane">
      content 3
    </div>

誰かがタブをクリックしたときにURLハッシュを変更したいと思います。ブートストラップにはこれのための機能やプラグインがありますか、それともこの機能を手動で書く必要がありますか?

たとえば、手動で行うと、次のようになります。 

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
  });
});

backdone.marionette をどのように正しく使用するのですか (ビュー内、ルーター内、または他の部分コード内)。

4

1 に答える 1

2

backbone/backbone.marionette 実装の場合: ルーター ファイルでルートを構成し、ビュー内からそのルートをトリガーすることの組み合わせです。もちろん、取得したい状態のパラメーターを指定する必要があります。

私の実装（マリオネット）では、コントローラーからこれをトリガーします：

ルーター.js:

   define([
   "marionette",
   "controller"
],
function (Marionette, appController){
    "use strict";

    var AppRouter = Backbone.Marionette.AppRouter.extend({

        appRoutes  : {
           "mainview/id/:tabName": "showTabFunction"
    });

   return new AppRouter({controller:appController});

});

コントローラー.js:

    define([
    'marionette',
    'myapp',
    'vent',
    'userSession', ],

function(Marionette, App, vent, userSession) {

    var MyController = Marionette.Controller.extend({

        showTabFunction: function(tabName) {
            this.isAuthenticated();

            require(['path/to/my/files'], function(page) {
                var page= new page({
                    tab:tabName
                });
                App.main.currentView.content.show(page);
            });
        }

    })

    return new MyController();

});

最後に、view.js:

manageTab: function(e) {

         this.curTab = $(e.target).attr("data-id");

         //update URL 
        App.Router.navigate("mainview/id/"+this.curTab, {
            trigger: false
        });
    },

それが役立つことを願っています

于 2013-05-07T22:30:55.070 に答える