我开始学习NativeScript . 作为这项努力的一部分,我需要弄清楚如何连接视图模型 . 我've reviewed the examples. I feel like I'关闭 . 然而,有些事情已经结束 . 与此同时,我似乎无法弄清楚如何查看我的应用程序中是否存在错误 . 目前,我有:
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;
login-vm.js
var observable = require("data/observable");
var http = require("http");
function LoginViewModel() {}
LoginViewModel.prototype = new observable.Observable();
module.exports = LoginViewModel;
当我输入用户名字段时,我希望能够在字段中看到用户名 . 但是,这种情况并没有发生 . 我以为我有双向绑定设置 . 当用户点击登录时,我想在“警报”窗口中显示用户名,因此我知道我已正确连接了我的视图模型 . 无论哪种方式,它都不起作用 .
我究竟做错了什么?
1 回答
要在下面的 Label 中查看输入 Username 的值并使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 中的方法 .