【问题标题】:What's the easiest way to implement routes to show certain views?实现路由以显示某些视图的最简单方法是什么?
【发布时间】:2014-11-14 23:07:47
【问题描述】:

我创建了一个网站,其中包含多个从屏幕右侧滑入的面板。

我希望能够在将共享我的网页的每个面板上放置一个链接,并且当用户访问该网站时,该特定面板将打开。

例如:

www.something.com/#/panel-1

将在打开 panel-1 的情况下显示我的页面,同时:

www.something.com/#/panel-2 将显示打开 panel-2 的页面。

最简单的方法是什么?我可以仅使用简单的 html 来使用 Ember、Angular 或 Backbone 的路由器和视图吗?我应该只使用 router.js 之类的东西吗?

任何帮助、建议或链接将不胜感激。

【问题讨论】:

  • 我建议你选择一个你最熟悉的框架,因为路由实现只是网络应用程序的一小部分。
  • @linial 我对 js 框架还很陌生,所以我正在寻找一个对于这个用例来说很容易上手的框架。这将是我在客户端站点上使用的第一个框架。你有什么可以推荐的吗?
  • @Linial,这确实是我需要的这些框架的唯一功能。
  • @coffeebytes 前瞻性地思考。你现在不需要更多,明天就不需要了吗?谁知道?如果您发现自己需要实现更多东西,那么拥有一个不需要与之抗争的框架总是好的。

标签: javascript angularjs backbone.js ember.js routerjs


【解决方案1】:

当然可以。这是 ember.js 最强大的品质之一。声明路由后,框架可以自动生成所有相应的控制器和视图(称为约定优于配置)。看一个例子

Ember.Application.create({});
Ember.Router.map(function(){
    this.route('panel1');
    this.route('panel2');
});


<script type="text/x-handlebars">
    {{link-to 'index' 'index'}}
    {{link-to 'first panel' 'panel1'}}
    {{link-to 'second panel' 'panel2'}}

    <!--your panels will be inserted automatically in the outlet property-->
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="panel1">
  panel 1
  </script>
  <script type="text/x-handlebars" data-template-name="panel2">
  panel 2
  </script>

演示:http://jsbin.com/dekixayuxa/1/

【讨论】:

  • 我听说 ember 的学习曲线很高,但您让这个演示看起来很简单!让我玩一会儿,然后我可能会接受你的回答。
  • 这是因为人们倾向于把事情过于复杂化。有些东西你可以在 ember 中编写代码而无需编写任何 JS。你相信吗?如果没有,请查看文档。祝你好运。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-09-05
  • 1970-01-01
  • 2018-02-09
  • 1970-01-01
  • 2013-08-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多