使用 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

如何使用 Ionic 3 和 Angular 4 创建可重用组件

如何创建可重用的 Twig 组件

使用 Vue.js 创建可重用的按钮组件

创建可重用组件的模式

Magnolia 中的可重用表单组件