Nativescript：使用带有纯 JavaScript 的 NativeScript UI答案

【问题标题】：Nativescript: Use NativeScript UI with plain javascriptNativescript：使用带有纯 JavaScript 的 NativeScript UI
【发布时间】：2019-09-06 15:54:16
【问题描述】：

我正在构建一个只有 javascript、没有 typescript、没有 angular、没有 vuejs 的应用程序。

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

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

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

有人知道怎么做吗？

【问题讨论】：

标签： nativescript

【解决方案1】：

是的，很有可能。在许多示例中，您必须在心理上将 typescript 转换为 javascript。我自己使用 javascript 项目，并且在刚开始时必须自己进行这些翻译。这可能有点令人困惑。

【讨论】：

只要知道点击动作接收列表视图中的数组条目作为其绑定上下文。在进入点击操作时暂停调试器并检查各种对象的关系非常有帮助。因此，args.object = 被点击的控件，args.object.bindingContext = 数组条目，args.object.page = 页面对象。

【解决方案2】：

无论是 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;

Playground Sample

【讨论】：

谢谢你的作品。我有 args.object.bindingContext 代替。太棒了。