Использовать привязку в URL-адресе после загрузки с нокаутом

65
5

Я работаю над страницей нокаута, и у меня есть список предметов. Для каждого элемента мне нужно, чтобы у них был якорный тег для прокрутки. Проблема, с которой я столкнулась, - это привязка тега загружается из привязки нокаута, поэтому, когда вы нажимаете на URL с внешней страницы, у вас будет проблема с ней, фактически прокручивая элемент. Страница с хешем - отдельная страница. Таким образом, вы не можете прокручивать хэш на загрузку страницы просто потому, что он не существует, пока нокаут не загрузит привязки.

Например...

Мой url = mysite.com/page1#thisItem

Он должен ссылаться на страницу1 с привязным тегом, например...

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

Проблема в том, что имя добавляется после привязки нокаута. Я бы предпочел сделать это без проверки javascript, если у него есть идентификатор для ссылки и изменения window.location, однако если это мой единственный выбор, я сделаю это. У кого-нибудь есть более элегантное решение этой проблемы?

спросил(а) 2021-01-19T17:04:09+03:00 9 месяцев, 1 неделя назад
1
Решение
92

Если вы usecase достаточно просты, вы можете просто проверить целевую нагрузку, после инициализации вашего KO, а затем просто отправить туда пользователя. Использование чего-то вроде scrollIntoView должно работать:

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

(не тестировались, настраивались на синтаксические ошибки и т.д.!)

ответил(а) 2021-01-19T17:04:09+03:00 9 месяцев, 1 неделя назад
65

В этом примере я собрал работы прекрасно:

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

Вам необходимо использовать привязку данных attr для установки целевой привязки после загрузки:

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

а затем аналогично установить целевое имя привязки:

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

ответил(а) 2021-01-19T17:04:09+03:00 9 месяцев, 1 неделя назад
46

Все, что вам нужно сделать, это снова установить 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>

ответил(а) 2021-01-19T17:04:09+03:00 9 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема