使用 KnockoutJS 创建可重用组件
Posted
技术标签:
【中文标题】使用 KnockoutJS 创建可重用组件【英文标题】:Creating reusable components with KnockoutJS 【发布时间】:2012-03-01 06:14:41 【问题描述】:一段时间以来,我一直在为项目创建可重用组件作为 jQuery 插件。我喜欢能够抽象出逻辑,并根据具体情况注入所有上下文(选择器、选项等)。
现在,我开始使用 KnockoutJS,并编写了一个不错的小 jQuery 插件,它使用 Knockout 作为其内部逻辑。它工作得很好,但我想知道是否有更好的方法来做到这一点? 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));
【问题讨论】:
【参考方案1】:我为 KO 组件运行了一个 github 项目。它使用的是旧版本的 KO,需要进行重大改造,但您可能会得到一些想法。我基本上是通过将模型对象作为配置和数据的自定义绑定来完成的。
我一直在寻找更好的方法来做到这一点。如果您想出更好的方法,请随时通知我。
https://github.com/madcapnmckay/Knockout-UI
【讨论】:
非常酷。所以我想“KO是否有创建组件的模式/约定”的答案基本上是没有的? 我不知道。我猜想将功能转移到自定义绑定中是一种模式。在这方面它是相当有限的,但是嘿,有人可能会想出这方面的变化。 Knockout Validation 是一个可重用的组件,它提供扩展器来完成大部分工作。以上是关于使用 KnockoutJS 创建可重用组件的主要内容,如果未能解决你的问题,请参考以下文章
Knockoutjs:Component and Custom Elements