0

I'm starting to learn NativeScript. As part of that endeavor, I need to figure out how to wire-up a view model. I've reviewed the examples. I feel like I'm close. However, something is off. At the same time, I cannot seem to figure out how to see if there are errors in my app. Currently, I have:

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;

As I type in the username field, I was expecting to be able to see the username in the field. However, that isn't happening. I thought I had two-way binding setup. I'd like to show the username in an "alert" window when the user clicks login just so I know I've wired up my view model properly. Either way, its not working.

What am I doing wrong?

4

1 回答 1

0

To see the value of the input Username in the Label below and get NativeScript's two-way databinding to work in the code you posted, there are a few things you need to do:

  1. login-xml.js --- Rename login-xml.js to login.js. The NativeScript runtime looks for a corresponding JS file with the same name (login.js) as the XML file (login.xml)

  2. login-vm.js --- Change the line module.exports = LoginViewModel; to module.exports = new LoginViewModel();. This simply facilitates the instantiation of LoginViewModel in login.js.

  3. login.js --- Remove the line var viewModel = new LoginViewModel();. The first line, var viewModel = require('./login-vm'); already instantiates LoginViewModel into the variable viewModel.

I've tested the code. Check it out and see what happens.

ALSO: Going forward, it might be better to put your event handlers loginButton_Tap and signUpButton_Tap as methods in LoginViewModel.

于 2015-07-15T02:16:42.377 回答