时间戳

首页 > 解决方案 > Nativescript：使用带有纯 JavaScript 的 NativeScript UI

nativescript - Nativescript：使用带有纯 JavaScript 的 NativeScript UI

问题描述

我正在构建一个只有 javascript、没有打字稿、没有角度、没有 vuejs 的应用程序。

是否可以将 NativeScript UI 与纯 javascript 一起使用？

我正在尝试使用 radlistview，而我发现的唯一代码是在 TypeScript 上。

如果没有，那么我要做的只是在每个项目上输出一个列表和 tapAction 以使用该项目传递的数据导航到单个项目。

有人知道该怎么做吗？

标签： nativescript

解决方案

无论 TypeScript / Angular / Vue 是什么，代码的结尾都只符合纯 JavaScript。这些只是有助于加快开发速度并使事情变得更容易的现代框架/库。

TypeScript 代码可以使用 TypeScript CLI 编译成 JavaScript，甚至有几个站点在您的浏览器中执行此操作。

RadListView：视图模型

var frame = require("tns-core-modules/ui/frame");
var observableModule = require("tns-core-modules/data/observable");

function HomeViewModel() {

  var viewModel = observableModule.fromObject({

    countries: [
      { name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
      { name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
      { name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
      { name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
      { name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
      { name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
      { name: "Czech Republic", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cz.png" },
      { name: "Germany", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/de.png" },
      { name: "Spain", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/es.png" },
      { name: "Ethiopia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
      { name: "Croatia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
      { name: "Hungary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
      { name: "Italy", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/it.png" },
      { name: "Jamaica", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/jm.png" },
      { name: "Romania", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png" },
      { name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
      { name: "United States", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" },
    ],

    onItemTap: function (args) {
      var bindingContext = args.view.bindingContext;
      console.log(bindingContext.name);
    },

  });

  return viewModel;
}

module.exports = HomeViewModel;

游乐场样本

推荐阅读