Nativescript:将 NativeScript UI 与纯 JavaScript 结合使用



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

是否可以将NativeScript UI与纯JavaScript一起使用?

我正在尝试使用radlistview,我找到的唯一代码是在TypeScript上。

如果没有,那么我要做的只是输出一个列表并在每个项目上点击操作,以导航到具有该项目传递数据的单个项目。

有人知道如何做到这一点吗?

是的,这是很有可能的。 在许多例子中,你必须在脑海中从打字稿翻译成javascript。 我自己使用javascript项目,当我刚开始时不得不自己进行这些翻译。 这可能有点令人困惑。

无论 TypeScript/Angular/Vue 如何,代码的结尾都只遵循普通的 JavaScript。这些只是现代框架/库,有助于加快开发速度并使事情变得更容易。

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

RadListView: ViewModel

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;

游乐场样本

最新更新