Я создаю повторно используемые компоненты как плагины jQuery для проектов в течение некоторого времени. Мне нравится, когда можно абстрагироваться от логики и вводить весь контекст (селекторы, параметры и т. Д.) В каждом конкретном случае.Создание многоразовых компонентов с помощью KnockoutJS
Теперь я начинаю использовать KnockoutJS и написал небольшой плагин jQuery, который использует Knockout для его внутренней логики. Это работает очень хорошо, но мне интересно, есть ли лучший способ сделать это? У самого нокаута есть шаблон/соглашение для создания повторно используемых компонентов, или это шаблон хорошо?
Вот пример, этого должно быть достаточно, чтобы дать вам представление о том, что я делаю.
/*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));
Очень круто. Поэтому я думаю, что ответ на вопрос: «У KO есть шаблоны/соглашения для создания компонентов», в принципе, нет? –
Ничего, о чем я знаю. Я предполагаю, что перемещение функциональности в пользовательские привязки является шаблоном. В этом отношении он довольно ограничен, но кто-то может придумать варианты этого. Проверка нокаута является многоразовым компонентом, который предоставляет расширители для выполнения большей части работы. – madcapnmckay