如何使用 RequireJS 加载 KnockoutJS 自定义函数？

Question

我有一个使用自定义 observableArray 函数进行排序的视图模型。当我尝试运行它时，它说：“......没有方法'sortByProperty'”。

我应该如何加载 handlers.js 文件来完成这项工作？

handlers.js：

define(['knockout'], function(ko) {
        'use strict';

        ko.observableArray.fn.sortByProperty = function (prop, order) {
            this.sort(function (obj1, obj2) {
                var result;
                if (obj1[prop] == obj2[prop])
                    result = 0;
                else if (obj1[prop] < obj2[prop])
                    result = -1;
                else
                    result = 1;

                return order === "desc" ? -result : result;
            });
        };

    });

viewmodel.js：

define([
        'knockout',
        'js/extends/handlers'
    ], function(ko) {
        'use strict';

        var LabelsModel = function() {
            var self = this;

            self.availableLabels = ko.observableArray();
            self.selectedLabel = ko.observable();
            self.sortBy = ko.observable(); // What field to sort by
            self.sortOrder = ko.observable(); // Sort order. asc or desc.

            // Returns the labels for the current page
            self.pagedRows = ko.computed(function() {
                // Sorts the labels
                return self.availableLabels.sortByProperty(self.sortBy(), self.sortOrder());
            });

        };

        return LabelsModel;

    });

Answer 1

您必须首先确保定义了 KnockoutJS，然后加载插件，最后启动您的应用程序。我认为这就是应该如何加载库的所有插件的方式。以下是你可以做到的：

require.config({
        paths: {
        jquery: 'libs/jquery-1.9.0.min',
        ko: 'libs/knockout-2.2.1.min'
    }
});

require(['jquery', 'ko'], 
    function($, ko) {
        // ensure KO is in the global namespace ('this') 
        if (!this.ko) {
            this.ko = ko;
        };

        requirejs(['handlers'],
            function () { 
                require(['app'], 
                    function(App) { 
                        App.initialize(); 
                    }
                );
            }
        );
    }
);

我有更多的库，所以我只将其缩减为 JQuery 和 KnockoutJS，但基本上是你：

1. 声明你的库在哪里
2. 需要加载它们
3. 需要为您的库加载插件，这里是 KnockoutJS 的处理程序
4. 加载您的应用程序（在此处方便地命名为...“应用程序”:-)。这是您应该初始化视图模型并将它们绑定到 DOM 元素的地方。这很可能是所有库和插件都已加载的位置。