Disclaimer: Non so nulla di pager.js, ma spero che la mia esperienza generale a eliminazione diretta possa ancora essere d'aiuto.
Osservando l'esempio, il legame page sembra creare osservabili utilizzando i valori iniziali dall'URL. Il mio primo istinto sarebbe quello di estendere questo legame e assicurarmi che un abbonamento a ciascuno di questi valori aggiorni l'URL. Nome
Let questo legame twoway-page:
ko.bindingHandlers["twoway-page"] = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// Call pager.js' page binding
ko.bindingHandlers.page.init(element, valueAccessor, allBindings, viewModel, bindingContext);
// ...
}
}
e chiamarlo sull'esempio è vincolante:
<div data-bind="twoway-page: {
id: 'start',
params: ['first','last']
}">
Dopo aver chiamato page.init, la pagina di legame ha esteso il ViewModel, aggiungendo le osservabili definiti nel params per l'oggetto viewModel. Ciò significa che possiamo sottoscrivere i cambiamenti in questi osservabili.
La prossima sfida è calcolare l'hash giusto. Ho osservato come l'associazione page-href calcola il suo attributo href. Risulta che utilizza pager.page.path() su un oggetto con una proprietà path e params. Es .:
var hash = pager.page.path({
path: "user",
params: {
"first": "John",
"last": "Doe"
}
});
Ho cercato di costruire un oggetto simile in un osservabile calcolato.
// ...
var options = valueAccessor();
var pathObj = ko.computed(function() {
var result = {
path: options.id,
params: {}
};
options.params.forEach(function(param) {
result.params[param] = viewModel[param]();
});
return result;
}).extend({ rateLimit: { timeout: 200, method: "notifyWhenChangesStop" } });
non riuscivo a trovare un modo "pulito" per aggiornare l'hash tramite un metodo pager.js, ma ho notato che internamente, pagerjs utilizza location.hash = "newhash" per impostare un valore (anche se ci sembra anche essere un history/html5 alternative ...). Ad ogni modo, siamo in grado di iscriversi alla nostra osservabile per aggiornare l'hash:
// ...
pathObj.subscribe(function(newValue) {
location.hash = pager.page.path(newValue);
});
Ora, al posto dei text attacchi dalla esempio, useremo textInput attacchi in modo che possiamo aggiornare i valori:
<div>
<span>First name:</span>
<input type="text" data-bind="textInput: first">
</div>
Quindi, per concludere: la mia ipotesi migliore sarebbe quella di
- Estendere un cercapersone esistente.js binding
- Creare sottoscrizioni a tutti gli osservabili che devono essere aggiornati nell'URL
- Aggiorna automaticamente l'hash quando i valori cambiano; utilizzare l'estensione
rateLimit per evitare un sovraccarico di aggiornamenti
fare cose con l'hash posizione è un po 'difficile da mostrare in un violino, così ho registrato un gif della mia prova di concetto:
Il codice completo personalizzato vincolante è:
ko.bindingHandlers["twoway-page"] = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
ko.bindingHandlers.page.init(element, valueAccessor, allBindings, viewModel, bindingContext)
var options = valueAccessor();
var pathObj = ko.computed(function() {
var result = {
path: options.id,
params: {}
};
options.params.forEach(function(param) {
result.params[param] = viewModel[param]();
});
return result;
}).extend({ rateLimit: { timeout: 200, method: "notifyWhenChangesStop" } });
pathObj.subscribe(function(newValue) {
location.hash = pager.page.path(newValue);
})
return { controlsDescendantBindings: true }
}
};
+1 a questo. IMO, la soluzione migliore non sarebbe esplicitamente legata ai controlli (ad es.i controlli non producono navigazioni, ma inoltrano le loro modifiche alla pagina viewmodel, che può tranquillamente assumere la propria esistenza e navigare verso una versione diversa di se stessa). – TheHansinator