2013-05-15 12 views
6

Mam widoku modelu, który używa funkcji niestandardowych observableArray do sortowania. Kiedy próbuję to uruchomić, mówi: "... nie ma żadnych metod" sortByProperty "".Jak załadować niestandardowe funkcje KnockoutJS z RequireJS?

Jak załadować plik handlers.js, aby działało?

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; 

    }); 

Odpowiedz

1

Trzeba najpierw upewnić KnockoutJS jest zdefiniowana, a następnie załadować wtyczki, a na końcu uruchom aplikację . Myślę, że to jest sposób ładowania wszystkich wtyczek do bibliotek. Oto w jaki sposób można to zrobić:

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(); 
        } 
       ); 
      } 
     ); 
    } 
); 

miałem dużo więcej bibliotek więc wyciąć go trochę tylko jQuery i KnockoutJS, ale w zasadzie:

  1. stwierdzenie gdzie biblioteki
  2. wymagają ładowania ich
  3. wymagają ładowania wtyczek dla bibliotek, tutaj teleskopowe dla KnockoutJS
  4. załadować aplikację (dogodnie nazwie ... „app” tu :-). Tutaj należy zainicjować modele widoku i powiązać je z elementami DOM. Najprawdopodobniej jest to miejsce, w którym załadowano wszystkie biblioteki i wtyczki.
+0

Dzięki. Załadowanie go za pomocą requirejs rozwiązało problem. – Sindre

+0

@Sindre nice! Dzięki i życzę powodzenia! – Jalayn

+0

Nie powinieneś robić tego globalnie dla danego scenariusza. Wygląda na to, że oryginalna próbka powinna działać poprawnie. W ten sposób ładuję rozszerzenia. –