标签: singlepage

现在有许多很酷的工具可用于制作功能强大的"单页"JavaScript网站.在我看来,这是通过让服务器充当API(而不是更多)并让客户端处理所有HTML生成的东西来完成的.这种"模式"的问题是缺乏搜索引擎支持.我可以想到两个解决方案:

1. 当用户进入网站时,让服务器完全按照客户端导航时的方式呈现页面.因此,如果我http://example.com/my_path直接访问服务器将呈现与客户端/my_path通过pushState时相同的事情.
2. 让服务器只为搜索引擎机器人提供一个特殊的网站.如果普通用户访问http://example.com/my_path服务器应该给他一个JavaScript重型版本的网站.但是,如果谷歌机器人访问,服务器应该给它一些最小的HTML与我希望谷歌索引的内容.

这里将进一步讨论第一种解决方案.我一直在网站上做这个,这不是一个非常好的经历.这不是DRY,在我的情况下,我必须为客户端和服务器使用两个不同的模板引擎.

我想我已经看到了一些优秀的Flash网站的第二个解决方案.我比第一个更喜欢这种方法,并且在服务器上使用正确的工具,它可以非常轻松地完成.

所以我真正想知道的是:

• 你能想到更好的解决方案吗？
• 第二种解决方案有哪些缺点？如果谷歌以某种方式发现我没有像普通用户那样为谷歌机器人提供完全相同的内容,那么我会在搜索结果中受到惩罚吗？

我的目标是将现有Web应用程序迁移到RESTful 单页面应用程序(SPA).目前,我正在评估几个Javascript Web应用程序框架.

我的要求如下:

• RESTful数据层(如ember-data)
• MV* - 结构
• 动态路线
• 测试支持
• 按惯例编码
• SEO支持
• 浏览器的历史记录,支持
• 好的(API-)文档
• 生产就绪
• 生活社区

骨干

当前的应用程序正在使用backbone.js.总的来说,这backbone.js是一个很好的项目,但是我缺少明确定义的结构,这些结构决定了必须发生的事情以及必须如何实现.在更大的团队中工作,改变开发人员会导致某种非结构化代码,难以维护和难以理解.这就是为什么我现在正在寻找一个已经定义了所有这些东西的框架.

烬

我调查ember.js了最后几天.这种方法对我来说似乎很有希望.但不幸的是,代码几乎每天都在变化.所以,我不会称之为生产就绪.而且,不幸的是,我们不能等待它成为1.0版本.但我真的很喜欢这个框架背后的想法.

角

Angular.js是一个广泛传播的框架,由谷歌维护.但我无法熟悉角度.对我来说,结构似乎有点不清楚,对框架的每个部分的总体职责缺失了解释,并且实现感觉迂回.只是为了说明这一点:这只是我的个人印象,可能是基于缺少的知识.

蝙蝠侠和流星

据我所知,两个框架也需要一个服务器部分.因为我们只想要一个RESTful后端 - 无论使用什么语言,技术或软件,这都不是我们想要的.此外,后端API已经存在(RoR).

Knockout,CanJS和Spine

我没有深入研究这三位候选人.也许这将是我的下一步.

所以现在我的问题是:

• 我错过了任何优秀的SPA框架吗？
• 你会建议/推荐什么框架？
• 你会避免任何提到的框架吗？
• 您在大型SP应用程序中的经验是什么？

PS:我想推荐一个伟大的博文由史蒂芬·安德森(从Knockout.js核心开发人员)约(自2012年)的"JS王座" -会议和一般的JavaScript框架.

PS:是的,我知道已经有一些问题了.但是,由于SPA的发展如此迅速和快速,因此大多数已经过时了.

如何在客户端构建复杂的单页JS Web应用程序？具体来说,我很好奇如何根据模型对象,UI组件,任何控制器和处理服务器持久性的对象来干净地构建应用程序.

MVC起初似乎很合适.但是,如果UI组件嵌套在不同的深度(每个组件都有自己的方式对模型数据进行操作/对模型数据作出反应,并且每个生成事件本身可能会或可能不会直接处理),看起来MVC似乎不能干净利用.(但如果情况并非如此,请纠正我.)

-

(这个问题产生了两个使用ajax的建议,除了最简单的单页应用程序之外,其他任何东西显然都需要.)

我目前正在使用angularjs编写一个Web应用程序,但我认为这个问题适用于在客户端进行路由的任何客户端javascript框架(如角度所做).

在单页面应用中,处理错误网址的正确方法是什么？

查看几个主要网站,如果您在https://mail.google.com/mail/下面输入任意随机网址,我会看到Gmail会重定向到收件箱.这发生在服务器端(使用http 300代码)或客户端,具体取决于错误路径是在#字符之前还是之后.另一方面,twitter显示任何无效URL的真实HTTP 404.第三种选择是显示"软"404,纯粹的客户端错误页面.

这些解决方案似乎适合不同的情况.Twitter希望Twitter用户和推文的链接是真实的链接,因此人们可以分享它们,在新闻文章中发布它们等,因此无效链接被识别是非常重要的(如果我的推文链接断开了)我的网站,一个简单的爬行会告诉我).另一方面,在gmail中,您不应该将链接分享到您的收件箱中,我甚至不确定链接是否真的是永久性/持久性的:似乎网址更新主要用于浏览器历史记录导航的目的.单页应用.给出软错误的第三种方法可能适用于类似于gmail的情况,但是没有合理的"默认"页面.

经过这么长时间的介绍,这里有一些具体的问题:

• 提供"软"错误页面而不是404错误是否可以接受,或者如果网址无效,单页应用是否应始终重定向到真实404？
• Gmail的代码可能完全没有错误,但如果它确实存在导致无效链接最终重定向回收件箱的错误,那么对于用户而言可能比错误页面更加混乱.对于那里的大多数网络应用程序,它们没有像gmail那样经过良好测试,显示错误页面会更好吗？
• 要为单页面应用程序实现真正的404,似乎有必要在服务器端复制路由逻辑.有没有办法解决？
• 当重定向到404时,我认为用户应该能够看到导致错误的URL,可能在URL栏中.使用html5历史API,我认为这可以通过简单地触发当前页面的重新加载(使用错误的URL),结合上面提到的服务器端路由来实现.对于不支持此功能或使用hashbang表示法的浏览器,这似乎不可行.支持所有浏览器的最佳方式是什么？

我正在使用KO构建SPA(单页应用程序).应用程序看起来像一本书,用户可以翻页.

问题是,每次页面加载时,页面都会闪烁,并且用户会看到页面没有样式的版本.我想这是由于很多样式依赖于ko绑定这一事实所以直到ko完成它"魔术",用户才能看到没有样式的代码.

是否有可能告诉KO何时完成所有绑定并且只显示页面？

我已经设法通过在加载视图之前设置超时来部分解决它,但当然这不是一个好的解决方案.

在我的网站上,这是一个使用Sammy.js和jQuery的单页JS站点,当我用鼠标中键单击链接时,链接将在新选项卡中打开.但是,当我在Mac上命令单击时,它没有.这种情况在Firefox和Chrome中都会发生,因此我认为它必须以某种方式符合规范.

这发生在Macbook Air上(所以触控板+命令按钮).大多数网站工作得很好,命令点击与正常的中间点击相同.

自己尝试一下:https://circleci.com.在"关于","主页"和"联系人"之间进行命令单击,您应该会遇到问题 - 它们不会在新选项卡中打开.

我想在Woocommerce的产品单页中获取SKU.我试过<?php get_sku(); ?>根据Woocommerce文档(http://docs.woothemes.com/wc-apidocs/class-WC_Product.html)这是一个特色功能,但它只会打破循环.该怎么办？

有没有人在Java中看过一个例子或做过以下内容:http: //duganchen.ca/single-page-web-app-architecture-done-right/

这是一个设计单页面的网络应用程序,它将使用谷歌搜索引擎优化与大量违反使用Java技术的DRY？

我自己做这个似乎并不难,但我很好奇(并且懒惰)看看有人已经用Spring或JAX-RS完成了它.

我有一个涉及KnockoutJS和CKEditor的情况.

基本上我们的网站是"单页"应用程序风格的一部分,目前它只涉及2个页面,但可能会随着时间的推移而扩展,目前它只是一个"列表"页面和一个"管理"页面,用于名单.

管理页面本身需要某种富文本编辑器,我们已经将CKEditor用于公司范围的解决方案.

因为这两个页面是"单页"样式,显然CKEditor无法注册管理元素,因为它们不在页面加载上 - 足够简单的问题需要修复.因此,作为一个示例,我在一个非常有用的点击事件上附加了CKEditor.接下来的问题是,然后设置的Knockout observable没有得到更新,因为CKEditor实际上并没有修改它附加的textarea,它会创建你实际编辑的所有div/html元素.

经过一段时间的谷歌搜索后,我找到了一个用TinyMCE做这个的例子 - http://jsfiddle.net/rniemeyer/GwkRQ/所以我想我可以为CKEditor调整类似的东西.

目前我非常接近有一个可行的解决方案,我已经使用这种技术初始化和更新正确的observable(我将在底部发布代码),甚至正确地回发到服务器 - 太棒了.

我目前遇到的问题是"单页"应用程序部分和CKEditor的重新初始化.

基本上你可以点击列表进行管理然后保存(返回到列表页面)然后当你去另一个'管理'时CKEditor被初始化但是它没有任何值,我已经检查了更新代码(下面)和'value'肯定有正确的值,但它没有被推送到CKEditor本身.

也许是对CKEditor的流程/初始化过程缺乏了解或者缺乏对挖掘绑定的理解,或者可能是我们单页应用程序设置的框架存在问题 - 我不确定.

这是代码:

//Test one for ckeditor
ko.bindingHandlers.ckeditor = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
        var options = allBindingsAccessor().ckeditorOptions || {};
        var modelValue = valueAccessor();

        $(element).ckeditor();

        var editor = $(element).ckeditorGet();

        //handle edits made in the editor
        editor.on('blur', function (e) {
            var self = this;
            if (ko.isWriteableObservable(self)) {
                self($(e.listenerData).val());
            }
        }, modelValue, element);


        //handle destroying an editor (based on what jQuery plugin …

我尝试添加自定义过滤器,但如果我使用以下代码:

angular.module('myApp',[]).filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

但是,如果我这样做,我得到:"引用错误:角度未定义"在萤火虫中.

其余的应用程序工作正常,我在标签div中使用ng-app而不是标签html,并且https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js