Framework7 inline pages components initialize not firing

问题

I am using Framework7 framework. When trying to initialize a component, like calendar or picker at homepage they work and got fired, but in inline pages not.

When I am saying "pages" im talking about "views".

js file:

var monthNames = ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט' , 'ספטמבר' , 'אוקטובר', 'נובמבר', 'דצמבר'];
    var dayNames = ['ראשון', 'שני', 'שלישי', 'רביעי', 'חמישי', 'שישי', 'שבת'];
    var dateObj = new Date();
    var month = dateObj.getMonth(); //months from 1-12
    var day = dateObj.getDate()-1;
    var year = dateObj.getFullYear();
    myApp.calendar({
      input: '.date',
      closeOnSelect: true,
      disabled: {
        from: new Date(1000, 3, 1),
        to: new Date(year, month, day),
      },
      monthNames: monthNames,
      dayNamesShort: dayNames,
      firstDay: 0, // put sunday as first day
    });

The above file is got fired by the next html command in home page (mainview - index.html) but not in inline view, like register.html:

<input type="text" id="date" ng-model="newRide.date" readonly class="date form_input ltr">

Here is the main app.js file:

Framework7.prototype.plugins.angular = function(app, params) {
    function compile(newPage) {
        try {
            var $page = $(newPage);
            var injector = angular.element("[ng-app]").injector();
            var $compile = injector.get("$compile");
            var $timeout = injector.get("$timeout");
            var $scope = injector.get("$rootScope");
            $scope = $scope.$$childHead;
            $timeout(function() {
                $compile($page)($scope);
            })
        } catch (e) {
            //console.error("Some Error Occured While Compiling The Template", e);
        }
    }

    return {
        hooks: {
            pageInit: function(pageData) {
                compile(pageData.container);
            }
        }
    }

};

var myApp = {};
var mainView = {};
var rightView = {};
var $$ = Dom7;

var app = angular.module("AngularApp", [])

app.run(function($rootScope, $window, $http, localStorageService) {

    $rootScope.siteName = "RIDE4YOU";
    $rootScope.clearDomain = "https://www.ride4you.co.il/";

    // define framework7
    myApp = new Framework7({
      modalTitle: "RIDE4YOU",
      modalButtonOk: "אוקיי",
      modalButtonCancel: "ביטול",
      material: false,
      angular:true,
      fastClicks: true,
      domCache: false,
      allowPageChange: false,
      pushState: true
    });

    mainView = myApp.addView('.view-main', {});

    $rootScope.go_back = function() {
      $window.history.back();
    };

    $$(document).on('page:init', function (e) {
      var page = e.detail.page;
      $rootScope.page = page;
      if (page.name!="index")
        $rootScope.stopTimer = true;
    });

    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {

    }
 });

And this is how I set an inline view:

HTML FILE:

<div data-page="newride" class="page no-toolbar no-navbar" ng-controller="newride">
  <div class="page-content">

   <div id="pages_maincontent">

   </div>

 </div>
</div>

Thanks.

回答1:

calendar and along with some other will not reinitialise from inline page. so you have to initialise on page init in app.js or use jquery to re-initialise the calendar. The best solution for your application is to re-initialise on page:init

$$(document).on('click', 'classname',function (e) {
var month = dateObj.getMonth(); //months from 1-12
var day = dateObj.getDate()-1;
var year = dateObj.getFullYear();
var cal = myApp.calendar({
  input: '.date',
  closeOnSelect: true,
  disabled: {
    from: new Date(1000, 3, 1),
    to: new Date(year, month, day),
  },
  monthNames: monthNames,
  dayNamesShort: dayNames,
  firstDay: 0, // put sunday as first day
});
 cal.open();
});

来源：https://stackoverflow.com/questions/48048585/framework7-inline-pages-components-initialize-not-firing

标签

html-framework-7