Ho creato componenti riutilizzabili come plugin jQuery per progetti da qualche tempo. Mi piace essere in grado di astrarre la logica e iniettare tutto il contesto (selettori, opzioni, ecc.) Caso per caso.Creazione di componenti riutilizzabili con KnockoutJS
Ora sto iniziando a utilizzare KnockoutJS e ho scritto un piccolo plugin jQuery che utilizza Knockout per la sua logica interna. Funziona abbastanza bene, ma mi chiedo se c'è un modo migliore per farlo? Knockout ha una configurazione/convenzione per la creazione di componenti riutilizzabili, o questo modello è a posto?
Ecco un esempio, dovrebbe essere sufficiente per darti l'idea di cosa sto facendo.
/*globals jQuery, knockout */
(function ($, ko) {
"use strict";
$.fn.itemManager = function (options) {
// set up the plugin options
var opts = $.extend({}, $.fn.itemManager.defaultOptions, options),
$wrap = $(this),
templateUrl = '/path/to/template/dir/' + opts.templateName + '.html';
// set up the KO viewmodel
function ItemManagerModel(items) {
var self = this;
self.items = ko.observableArray(items);
self.chosenItemId = ko.observable();
self.chosenItemData = ko.observable();
// generic method for navigating the Item hierarchy
self.find = function (array, id) {
/* ... */
};
/* bunch of other stuff... */
self.goToItem(items[0]);
}
// this is where the whole thing starts...
$(opts.openTriggerSelector).click(function (e) {
e.preventDefault();
// set the template html
$.get(templateUrl, function (data) {
$wrap.html(data);
});
// initial load and binding of the data, in reality I have some more conditional stuff around this...
// there's probably a better way to do this, but I'll ask in a separate question :)
$.get(opts.getItemsServiceUrl, function (result) {
ko.applyBindings(new ItemManagerModel(result), document.getElementById($wrap.attr('id')));
$wrap.data('bound', true);
});
// opens the template, which now is bound to the data in a dialog
$wrap.dialog({ /* ... */ });
// provide default plugin options
$.fn.itemManager.defaultOptions = {
getItemsServiceUrl: '/path/to/service',
openTriggerSelector: 'a',
templateName: 'Default'
};
} (jQuery, ko));
Molto bello. Quindi immagino che la risposta a "KO abbia schemi/convenzioni per la creazione di componenti" sia sostanzialmente no? –
Nessuno che io conosca. Immagino che lo spostamento di funzionalità in associazioni personalizzate sia un modello. È piuttosto limitato a questo proposito, ma hey qualcuno potrebbe inventare delle variazioni su questo. Knockout Validation è un componente riutilizzabile che consente agli estensori di svolgere gran parte del lavoro. – madcapnmckay