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;

当我输入用户名字段时，我希望能够在字段中看到用户名。但是，这并没有发生。我以为我有双向绑定设置。我想在＆＃34; alert＆＃34;中显示用户名。用户单击登录时的窗口，以便我知道我已正确连接了我的视图模型。无论哪种方式，它都无法正常工作。

我做错了什么？

Answer 1

要在下面的标签中查看输入用户名的值，并让NativeScript的双向数据绑定在您发布的代码中运行，有一些事情你需要做的事：

login-xml.js ---将 login-xml.js 重命名为 login.js 。 NativeScript运行时查找与XML文件（login.xml）具有相同名称（login.js）的相应JS文件
login-vm.js ---将行module.exports = LoginViewModel;更改为module.exports = new LoginViewModel();。这简单地促进了 login.js 中LoginViewModel的实例化。
login.js ---删除第var viewModel = new LoginViewModel();行。第一行var viewModel = require('./login-vm');已将LoginViewModel实例化为变量 viewModel 。

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

另外：展望未来，最好将您的事件处理程序 loginButton_Tap 和 signUpButton_Tap 作为 LoginViewModel 中的方法。

在NativeScript中连接视图模型

1 个答案: