如何使用RequireJS加載KnockoutJS自定義函數？

Question

我有一個View Model，它使用自定義的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元素的位置。這很可能是所有庫和插件都已加載的地方。