在 NativeScript 中连接视图模型

Question

我开始学习 NativeScript。作为这项工作的一部分，我需要弄清楚如何连接视图模型。我已经回顾了这些例子。我觉得我很接近。但是，有些事情不对劲。同时，我似乎无法弄清楚如何查看我的应用程序是否有错误。目前，我有：

login.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <ScrollView>
    <GridLayout columns="*, *" rows="auto, auto, auto, auto, auto, auto">
      <Label text="Username" row="0" col="0" class="label" colSpan="2" />
      <Border borderWidth="1" borderColor="#000" row="1" col="0" colSpan="2">
        <TextField text="{{ username }}" hint="username" />
      </Border>

      <Label text="Password" row="2"  col="0" class="label" colSpan="2" />
      <Border borderWidth="1" borderColor="#000" row="3" col="0" colSpan="2">
        <TextField text="{{ password }}" hint="password" secure="true" />      
      </Border>

      <Button text="Login" tap="loginButton_Tap" row="4" col="0" />
      <Button text="Sign Up" tap="signUpButton_Tap" row="4" col="1" />

      <Label text="hello" row="5" col="0" />
      <Label text="{{ username }}" row="5" col="1" />
    </GridLayout>
  </ScrollView>
</Page>

login.xml.js

var viewModel = require('./login-vm');

var viewModel = new LoginViewModel();
function pageLoaded(args) {
  var page = args.object;
  viewModel.set("username", "testing");
  page.bindingContext = viewModel;
}
exports.pageLoaded = pageLoaded;

function loginButton_Tap(args) {}
exports.loginButton_Tap = loginButton_Tap;

function signUpButton_Tap(args) {}
exports.signUpButton_Tap = signUpButton_Tap;

登录-vm.js

var observable = require("data/observable");
var http = require("http");

function LoginViewModel() {}
LoginViewModel.prototype = new observable.Observable();
module.exports = LoginViewModel;

当我在用户名字段中键入内容时，我希望能够在该字段中看到用户名。然而，这并没有发生。我以为我有双向绑定设置。我想在用户单击登录时在 "alert" window 中显示用户名，这样我就知道我已经正确连接了我的视图模型。无论哪种方式，它都不起作用。

我做错了什么？

Answer 1

要在下面的 Label 中查看输入 Username 的值并让 NativeScript 的双向数据绑定在代码中工作已发布，您需要做一些事情：

login-xml.js --- 将 login-xml.js 重命名为 login.js。 NativeScript 运行时查找与 XML 文件 (login.xml)
login-vm.js --- 将行 module.exports = LoginViewModel; 更改为 module.exports = new LoginViewModel();。这只是方便了login.js.
login.js --- 删除行 var viewModel = new LoginViewModel();。第一行，var viewModel = require('./login-vm'); 已经将 LoginViewModel 实例化为变量 viewModel.

我已经测试了代码。检查一下，看看会发生什么。

此外：展望未来，最好将事件处理程序 loginButton_Tap 和 signUpButton_Tap作为 LoginViewModel.

中的方法

在 NativeScript 中连接视图模型

Wiring up a view model in NativeScript

javascript

nativescript