3

現在、Web アプリケーションに jQuery、Twitter Bootstrap、および CanJS を使用しています。CanJSでルーティングを実装しようとしています。Bootstrap のタブを使用しています。タブをクリックすると、#tabSearch、#tabUser、または #tabPermissions が表示されるはずでしたが、ハッシュが空の文字列で返されます。私は何を間違っていますか？

これを使用してタブを変更しています：

     TabControl = can.Control.extend({}, {
        init: function (element, options) {
        element.find('a[href="' + options.defaultTab + '"]').tab('show');
        this.userSearch = null;
        this.userForm = null;
    }
    , 'a[data-toggle="tab"] show': function (e) {
        this.options.tabChangeCallback(e);
    }
});

     UserTab = new TabControl('#tabctrlUser', {
       defaultTab: '#tabSearch',
       tabChangeCallback: function (e) {

        if (e.context.hash == '#tabSearch') {                
            if (!this.userSearch) {
                this.userSearch = new FormUserQuery('#tabSearch', {});
            } 
        } else if (e.context.hash == '#tabUser') { 
            if (!this.userForm) {
                this.userForm = new FormUser('#tabUser', {});
            }
            this.userForm.renderView(currentUser);
        } else if (e.context.hash == '#tabPermissions') {                
            new FormPermissions('#tabPermissions', {});

        }
    }
});

HTML部分は次のとおりです。

<ul id="tabctrlUser" class="nav nav-tabs">
     <li><a href="#tabSearch"  data-toggle="tab">Pesquisar</a></li>
     <li><a href="#tabUser"  data-toggle="tab">Cadastrar/Alterar</a></li>
     <li><a href="#tabPermissions"  data-toggle="tab">Acessos</a></li>
</ul>
<div class="tab-content">
     <div class="tab-pane" id="tabSearch"></div>
     <div class="tab-pane" id="tabUser"></div>
     <div class="tab-pane" id="tabPermissions"></div>
</div>
4

2 に答える 2

2

can.routeまたはcan.Control.Routeを使用する必要があります。その方法は複雑です。この質問を見てください。 また、ルーティングに関する 2 つの優れた 記事があります。

この要旨を見て

http://jsfiddle.net/Z9Cv5/2/light/

var HistoryTabs = can.Control({
  init: function( el ) {

    // hide all tabs
    var tab = this.tab;
    this.element.children( 'li' ).each(function() {
      tab( $( this ) ).hide();
    });

    // activate the first tab
    var active = can.route.attr(this.options.attr);
    this.activate(active);
  },
  "{can.route} {attr}" : function(route, ev, newVal, oldVal){
    this.activate(newVal, oldVal)
  },
  // helper function finds the tab for a given li
  tab: function( li ) {
    return $( li.find( 'a' ).attr( 'href' ) );
  },
  // helper function finds li for a given id
  button : function(id){
    // if nothing is active, activate the first
    return id ? this.element.find("a[href=#"+id+"]").parent()  : 
                this.element.children( 'li:first' );
  },
  // activates 
  activate: function( active, oldActive ){
    // deactivate the old active
    var oldButton = this.button(oldActive).removeClass('active');
    this.tab(oldButton).hide();
    // activate new
    var newButton = this.button(active).addClass('active');
    this.tab(newButton).show();
  },
  "li click" : function(el, ev){
    // prevent the default setting
    ev.preventDefault();
    // update the route data
    can.route.attr(this.options.attr, this.tab(el)[0].id)
  }
});

// configure routes
can.route(":component",{
  component: "model",
  person: "mihael"
});

can.route(":component/:person",{
  component: "model",
  person: "mihael"
});

// adds the controller to the element
new HistoryTabs( '#components',{attr: 'component'});
new HistoryTabs( '#people',{attr: 'person'});
于 2013-09-12T13:16:59.840 に答える
1

私は CanJS に精通していませんが、ナビゲーションの前にアンカークリックイベントが発生し、 location.hashが. たとえば、（テストとして）リンクを次のように定義した場合

<a href="#tabSearch" onclick="tabChangeCallback()">Pesquisar</a>

そして、プレーンなバニラJSで試してください

function tabChangeCallback() {
  alert(location.hash)
}

空白表示になります。

しかし、次のようなことを試してみると

function tabChangeCallback() {
   setTimeout(function() {
       alert(location.hash)
   }, 100)
}

ハッシュが表示されます。したがって、あなたの場合は、メイン イベントの後のタイムアウト時にコードを実行するように設定するか、ハッシュの代わりにhref、イベントを引き起こしたアンカー要素の属性を読み取る必要があります。

更新以下の単純な JS の例は、タイムアウトなしでハッシュ値を取得する方法を示しています。

function tabChangeCallback(e) {

     var elem = e ? e.target : event.srcElement

     alert(elem.getAttribute("href"))
}
于 2013-09-11T17:26:36.000 に答える