gpt4 book ai didi

javascript - 如何使用 angularjs 对 HTML 列表进行渐进式增强?

转载 作者:数据小太阳 更新时间:2023-10-29 05:36:36 25 4
gpt4 key购买 nike

假设我有一个可访问的网站,该网站将在禁用 JS 的情况下进行咨询。

我有一个新闻列表,我可以这样总结:

<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>

每次重新加载页面时,您都会添加最新的新闻,如果您获得超过 10 条新闻,则旧的新闻将被丢弃。

现在,如果我使用 Angulard JS,我必须将数据放入一个模型和一个 ng-repeat,并摆脱我的静态 HTML。该列表将动态填充,因此使用 JS 的人将看到几乎实时更新的列表。

我需要的是让两者协同工作。我需要静态列表,如果 JS 被激活,我希望将当前元素插入到模型中并由 angularjs 管理。

现在我目前的做法是:

  • 当我的模型初始化时,分离列表 DOM,手动提取数据,并删除所有子列表
  • 在列表中注入(inject) Angular 模板代码
  • 让 Angular 发挥它的魔力

它很糟糕,因为你失去了 Angular 声明性优点,而且你有很多锅炉代码甚至不是通用的,所以你为页面中的每个小部件重写它。

最佳答案

这是一个很好的问题,在使用一些 js 框架时我已经想到了。

目前我只想隐藏静态 html 并在启用 javascript 时显示 Angular DOM。

您需要注入(inject)与您生成的静态 html 等效的 js 模型,这不是很好(不是 DRY)但是尝试从 DOM 获取初始数据将更难维护恕我直言。您可以将所有 javascript/模板捆绑在一个 js 文件中,这样一来,静态页面将只有一个脚本导入,并且对于无脚本查看器,页面重量不会受到影响。

关于javascript - 如何使用 angularjs 对 HTML 列表进行渐进式增强?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13250700/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com