如何根据sammy js中的路由加载html文件？

Question

我没有足够的javascript和jQuery开发经验,所以我想知道是否有人可以告诉我如何创建一个使用sammy.js和HTML模板的函数.

这是我现在的工作代码:

<script>
    ;(function($) {

      var app = $.sammy(function() {

        this.get('#/', function() { $('#content').text(''); });

        this.get('#/home', function() { $('#content').load('main.html'); });

      });

      $(function() { app.run() });

    })(jQuery);

</script>

这个代码main.html在我去或点击时放入了内容...html#/home但是我正在寻找一个javascript函数,它只是找出URL的终点(后面的单词..#/)并得到同名的html页面.

在伪代码中:

if( somethingWasClicked and uses sammy.js )
  loadContent();

function loadContent() {
    endpoint = figureOutEndPoint();
    $('#content').load(endpoint.html);
} 

谢谢您的帮助

Answer 1

你只需要一个带参数的路线:

this.get('#/:page', function() { 
    $('#content').load(this.params['page'] + '.html');
});

确保它在你的其他路线之后,或几乎所有的东西(例如#/home你已经处理过的)都会被召唤.

当然,您可以在路线中添加其他参数:

this.get('#/:where/:is/:pancakes/:house', function() {
    // Do things with this.params['where'], this.params['is'],
    // this.params['pancakes'], and this.params['house'].
});

您只需确保订单正确或路线可以互相争斗.路由的匹配顺序与它们的添加顺序相同,因此更常见的catch-all路由通常位于底部.