In many cases in the components we are using this.get('f7') and then calling a function on the f7 framework. The framework is set in the f7 variable in the f7 service. We get a unknown function error when trying to use the included components due to this. Fixed this by referencing f7.f7 to get the actual framework from the service

Author: GauravShetty1016

app/components/f7-navbar.js

@@ -7,7 +7,7 @@ export default Ember.Component.extend({
     this.$('.center').css('opacity', '0');
     var _this = this;
     setTimeout(function() {
-      _this.get('f7').sizeNavbars();
+      _this.get('f7.f7').sizeNavbars();
       _this.$('.center').css('opacity', '1');
     }, 0);
   }

app/components/f7-page-container.js

@@ -37,7 +37,7 @@ export default Ember.Component.extend({
    */
   initSearchBar: function() {
     if (this.get('searchBar')) {
-      this.get('f7').initSearchbar(this.$());
+      this.get('f7.f7').initSearchbar(this.$());
     }
   }.observes('searchBar')
 });

app/components/f7-page-content/f7-infinite-scroll.js

@@ -7,7 +7,7 @@ export default Ember.Mixin.create({
     if (action) {
       this.$().addClass('infinite-scroll');
       this.set('hasInfiniteScroll', true);
-      this.get('f7').attachInfiniteScroll(this.$());
+      this.get('f7.f7').attachInfiniteScroll(this.$());
       this.$().on('infinite', function() {
         if (_this.get('loading')) return;
         _this.$().find('.infinite-scroll-preloader').show();
@@ -24,7 +24,7 @@ export default Ember.Mixin.create({
   }.on('didInsertElement'),
 
   detachInfiniteScroll: function() {
-    this.get('f7').detachInfiniteScroll(this.$());
+    this.get('f7.f7').detachInfiniteScroll(this.$());
     this.$().find('.infinite-scroll-preloader').hide();
   }
 });

app/components/f7-page-content/f7-pull-to-refresh.js

@@ -7,11 +7,11 @@ export default Ember.Mixin.create({
     if (action) {
       this.$().addClass('pull-to-refresh-content');
       this.set('hasPullToRefresh', true);
-      this.get('f7').initPullToRefresh(this.$());
+      this.get('f7.f7').initPullToRefresh(this.$());
       this.$().on('refresh', function() {
         var deferred = Ember.RSVP.defer();
         deferred.promise.finally(function() {
-          _this.get('f7').pullToRefreshDone();
+          _this.get('f7.f7').pullToRefreshDone();
         });
         _this.sendAction('onPullToRefresh', deferred);
       });

app/components/f7-search-bar.js

@@ -16,7 +16,7 @@ export default Ember.Component.extend({
     if (searchList.length > 1) {
       throw new Error('There is more then one search list available within the search component.');
     }
-    this.get('f7').initSearchbar(this.$());
+    this.get('f7.f7').initSearchbar(this.$());
   },
 
   onQueryChanged: function() {