使用敲除加载后在 url 中使用锚标记答案

【问题标题】：Use an anchor tag in url after load with knockout使用敲除加载后在 url 中使用锚标记
【发布时间】：2016-01-12 07:07:35
【问题描述】：

我正在制作一个淘汰页面，我有一个项目列表。对于每个项目，我需要他们有一个锚标签可以滚动到。我遇到的问题是锚标记是从敲除绑定中加载的，因此，当您从外部页面单击 url 时，您会遇到实际滚动到该项目的问题。带有哈希的页面是一个单独的页面。因此，您无法滚动到页面加载时的哈希，因为它在敲除加载绑定之前不存在。

例如...

我的网址 = mysite.com/page1#thisItem

它应该链接到 page1 并带有锚标记，例如...

<a name="thisItem"></a>

问题是名称是在淘汰赛绑定之后添加的。我宁愿在没有 javascript 检查它是否有要链接的 id 并更改 window.location 的情况下执行此操作，但是如果这是我唯一的选择，那么我会这样做。有没有人对这个问题有更优雅的解决方案？

【问题讨论】：

你现在怎么样了？我们可以看到一些代码显示您尝试过的内容吗？
我还没有写它，因为我只是不喜欢我想要写它的方式，这是在页面加载后检查 url 的主题标签 ID，然后将 window.location 更改为 @ 987654323@。我正在寻求有关更好解决方案的建议，也许其他人知道淘汰赛会在页面加载后使其滚动到 id 而无需检查当前 url。如果您知道任何有助于让我知道的文件。如果有更好的方法，我宁愿不必按照我描述的方式去做。

标签： javascript jquery html knockout.js

【解决方案1】：

如果您的用例足够简单，您可以在您的 KO 初始化后简单地检查目标 onload，然后将用户发送到那里。使用scrollIntoView 之类的东西应该可以工作：

if (location.hash) {
    document.scrollIntoView(document.getElementByName(location.hash)[0]);
}

（未测试，调整语法错误等！）

【讨论】：

这非常有效。它比我想象的更优雅，但我仍然希望淘汰赛已经为此有所作为。我已经在我的解决方案中滚动到了，就像这样。但我不得不改变让 location.hash 替换散列，因为当你调用它时它会保留散列。 location.hash.replace("#", "")

【解决方案2】：

我整理的这个例子很好用：

https://jsfiddle.net/915jss01/1/

加载后需要使用attr数据绑定设置锚点目标：

<a data-bind="attr: {href: '#' + $data}, text: $data"></a>

然后类似地设置目标锚名称：

<a data-bind="attr: {name: $data}, text: $data"></a>

【讨论】：

这是我目前拥有的。我要调整我的问题，因为现在我明白了我不清楚的地方。带有哈希的页面是一个单独的页面。因此，您无法滚动到加载时的哈希值。

【解决方案3】：

你所要做的就是在你的页面设置好之后重新设置window.location.hash，它就会在那里滚动。您必须在重新分配之前清除它的值，以使其将分配识别为更改。

我设置了一个时间延迟，因为设置足够快，哈希的初始设置“有效”。

window.location.hash = '#3'; // because I'm in a snippet
var vm = {
  divs: ko.observableArray([{
    id: '1',
    classname: 'green'
  }, {
    id: '2',
    classname: 'blue'
  }, {
    id: '3',
    classname: 'red'
  }]),
  hashchange: ko.observable(false)
};


setTimeout(function() {
  ko.applyBindings(vm);
  var hash = window.location.hash;
  window.location.hash = '';
  window.location.hash = hash;
}, 100);

div {
  min-height: 500px;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: divs">
  <div data-bind="attr: {id: id}, css: classname, text: id">

  </div>
</div>

【讨论】：