如何正确使用marionetteJS更改与引导片（丸）URL哈希？ [英] how correctly change url hash with bootstrap tabs(pills) using marionetteJS?

问题描述

我有引导的导航药丸我的网页上。

I have bootstrap nav-pills on my page.

这是code的一部分：

This is part of code:

  <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哈希当有人点击选项卡。
并引导有一些这方面的功能或插件或者我需要手动编写此功能？

Now I want to change url hash when someone click on tab. Does bootstrap have some functionality or plugins for this or I need to write this functionality manually?

例如，如果我这样做manualy - 水木清华是这样的：

For example, if I do it manualy - smth like this:

$(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（在视图中，路由器或其他地方code）？

How it correctly do using backdone.marionette ( in view, in routers or in other parts code ) ?

推荐答案

骨干/ backbone.marionette实现：
它是一个在你的路由器配置文件击溃，并从视图中的触发狂胜的组合，你当然必须提供的参数要检索所需的状态。

for backbone/backbone.marionette implementation: its a combination of configuring the rout in you router file and triggering that rout from within your view, of course you must supply the parameters for the desired state you want to retrieve.

在我的实现（木偶）我触发这个从我的控制器，以便：

in my implementation (marionette) i trigger this from my controller so:

router.js：

router.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});

});

controller.js：

controller.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：

and finally you view.js:

manageTab: function(e) {

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

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

希望帮助

这篇关于如何正确使用marionetteJS更改与引导片（丸）URL哈希？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！