Przez jakiś czas tworzyłem komponenty wielokrotnego użytku jako wtyczki jQuery dla projektów. Lubię być w stanie oddzielić logikę i wstrzyknąć cały kontekst (selektory, opcje, itp.) Indywidualnie dla każdego przypadku.Tworzenie komponentów wielokrotnego użytku za pomocą KnockoutJS
Teraz zaczynam używać KnockoutJS i napisałem ładną małą wtyczkę jQuery, która używa Knockout do wewnętrznej logiki. Działa całkiem dobrze, ale zastanawiam się, czy jest lepszy sposób na zrobienie tego? Czy Knockout ma wzór/konwencję do tworzenia komponentów wielokrotnego użytku, czy też ten wzór jest w porządku?
Oto przykład, powinien wystarczyć, aby dać wyobrażenie o tym, co robię.
/*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));
Bardzo fajnie. Więc myślę, że odpowiedź na pytanie "czy KO ma wzory/konwencje tworzenia komponentów" w zasadzie nie jest wtedy? –
Żadnych, które znam. Myślę, że przeniesienie funkcjonalności do niestandardowych powiązań jest wzorcem. Jest to dość ograniczone pod tym względem, ale hej, ktoś może wymyślić wariacje na ten temat. Knockout Validation to składnik wielokrotnego użytku, który zapewnia przedłużenia do wykonywania dużej części pracy. – madcapnmckay