Как извлечь этот код NativeScript в функцию многократного использования? - PullRequest
0 голосов
/ 14 июня 2019

Обзор проблемы

Я пытаюсь извлечь некоторый рабочий код из моего файла с выделенным кодом NativeScript и создать из него функцию многократного использования.

Код, о котором идет речь, на самом делеПлагин, называемый NativeScript Feedback.

Прежде чем продолжить, я хотел бы отметить, что я очень новичок в NativeScript.

Демонстрационный код плагина былнаписано на TypeScript, и мне понадобилось очень много времени проб и ошибок, чтобы заставить его работать в моем основном приложении.

Вот рабочий код:

// example-page.js
// +---------------------------------------------------------------------------+
// | ALCA IT SOLUTIONS - Preferred Blank NativeScript Templates                |
// +---------------------------------------------------------------------------+                                                                       |                              |
// | VIEW MODEL Variables                                                      |
// | To access properties within view-model from XML screen:                   |
// |    -- use double curly brackets {{ }}                                     |
// |       example:  <Label text="{{ username }}" />                           |
// |                 <Button text="tap me" tap="{{ myTapMethod }}"/>           |
// | To access functions OUTSIDE of view model from XML screen:                |
// |    -- omit double curly brackets                                          |
// |       example:  <Button text="tap me" tap="myGenericFunction" />          |                                 |                                                                             
// +---------------------------------------------------------------------------+
// | 1. IMPORT REQUIRED FILES                                                  |                                                                        |
// +---------------------------------------------------------------------------+
const  { app }         = require("tns-core-modules/application");
const  { fromObject }  = require("tns-core-modules/data/observable");
var frameModule = require("tns-core-modules/ui/frame");

// Feedback Testing
const  Color  = require("tns-core-modules/color");
const Feedback  = require("nativescript-feedback").Feedback;
const FeedbackType  = require("nativescript-feedback").FeedbackType;
const  FeedbackPosition  = require("nativescript-feedback").FeedbackPosition;
const isIOS  = require ("tns-core-modules/platform");

// +---------------------------------------------------------------------------+
// | 2. CREATE VIEW MODEL                                                      |                                                                        |
// +---------------------------------------------------------------------------+
const model = {

  /* Properties */
  username: "john",
  password: "12345",
  feedback: new Feedback(),
  feedbackPosition: FeedbackPosition,
  feedbackType: FeedbackType,

  /* Methods */
  onNavTap: function(args){
    const navBtn = args.object;
    const page = navBtn.page;
    const btnId = navBtn.id;

    switch(btnId) {
      case "btn-activity":
          //page.frame.navigate("./activity/bloodpressure/bloodpressure");
          break;
      case "btn-programs":
        // code block
          break;
      case "btn-messages":
          // code block
          break;

      case "btn-journal":
          // code block
          break;

      case "btn-community":
          // code block
          break;

    }

    //alert(`${navBtn.id} is the id of the button!`);
    //this.showSuccess();
    this.showError();
    //this.showWarning();
  },

  showSuccess: function() {
    this.feedback.success({
      title: "Successfully shown myself!",
      message: "I'm configured to hide after 2.5 seconds.",
      duration: 2500,
      // type: FeedbackType.Success, // no need to specify when using 'success' instead of 'show'
      onTap: () => {
        console.log("showSuccess tapped");
      }
    });
  },

  showError: function(){
    this.feedback.show({
      title: "Feature Incomplete",
      titleSize: 25.0,
      message: "The Health Conscious feature you are trying to view has not been completed yet. Please check back soon!",
      messageSize: 14.0,
      duration: 5000,
      position: this.feedbackPosition.Bottom,
      type: this.feedbackType.Error,
      onTap: () => {
        console.log("showErrorBottom tapped");
      }
    });
  },

  showWarning: function(){
    this.feedback.show({
      // title: "The warning title",
      message: "This one doesn't have a title, but a very long message so this baby will wrap. Showing off multi-line feedback. Woohoo!",
      duration: 4000,
      position: FeedbackPosition.Top,
      type: FeedbackType.Warning,
      onTap: () => {
        console.log("showWarning tapped");
      }
    });
  }

}

/* Set the binding context */
const bindingContext = fromObject(model);

// +---------------------------------------------------------------------------+
// | 3. OTHER FUNCTIONS ( Not bound to ViewModel )                             |                                                                        |
// +---------------------------------------------------------------------------+
function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = bindingContext;
}

function onDrawerButtonTap(args) {
  const sideDrawer = app.getRootView();
  sideDrawer.showDrawer();
}

// +---------------------------------------------------------------------------+
// | 4. EXPORT OTHER FUNCTIONS                                                 |                                                                        |
// +---------------------------------------------------------------------------+
exports.pageLoaded = pageLoaded;
exports.onDrawerButtonTap = onDrawerButtonTap;

Как видите, плагин Feedback успешно работает на этой странице.

Я попытался извлечь его в свой собственный файл, и я попытался «потребовать» его.Ничего не помогло.

Как я могу извлечь этот код обратной связи в свой собственный файл, к которому я мог бы обратиться?Я хотел бы иметь возможность вызывать showSuccess, showWarning, showError с ЛЮБОЙ страницы в моем приложении - это было бы здорово.Еще лучше, конечно, было бы отправлять параметры.

Не могли бы вы показать мне, как я поместил бы эти 3 функции в их собственный файл, пожалуйста?

Я уверен, что буду признателен за помощь.Спасибо.

Джон

1 Ответ

0 голосов
/ 14 июня 2019

Вам нужно создать новый файл js. Скопируйте ваш отзыв требует и ваши функции. Убедитесь, что вы экспортировали функции, и тогда вы можете запросить новый файл (модуль) в любом другом файле или просто потребовать функции, поскольку вы объявите их как экспортируемые. Таким образом, ваш модуль (новый файл) может быть «feedback-util.js», и тогда вам потребуется использовать модуль для относительного пути к этому файлу. Предполагая, что вы находитесь в том же каталоге, в новом файле const f = require("./feedback-util"); затем f.showSuccess(arg, arg2)

Чтобы разрешить передачу аргументов, вы просто объявляете параметры аргумента при написании функции. Итак, когда вы вызываете эту функцию, вы предоставляете значения для аргументов

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...