Question

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

例如......

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

它应该链接到page1，锚点标签如...

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

问题是在敲除绑定后添加了名称。我更喜欢这样做，没有javascript检查它是否有一个id链接到并更改window.location，但如果这是我唯一的选择，那么我会这样做。有没有人对这个问题有更优雅的解决方案？

Answer 1

如果usecase足够简单，只需在KO初始化后检查目标onload，然后只需将用户发送到那里即可。使用类似scrollIntoView的内容应该有效：

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

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

Answer 2

这个例子我放在一起工作得很好：

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

您需要使用<a data-bind="attr: {href: '#' + $data}, text: $data"></a>数据绑定在加载后设置锚点目标：

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

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

jQuery

Answer 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>

在使用挖空加载后在url中使用锚标记

3 个答案: