javascript - 通过 Telerik App Builder 开发 native 应用程序时 main-page.js 和 main-view.model.js 有什么区别

Question

如何通过main-page.js更改基于xml的textField的文本？我使用 this.set("message", getMessage(this.counter)); 通过 main-view-model.js 更改值。但当我在 main-page.js 中尝试时，这种情况不起作用。这个怎么做？ :-) 我需要对我的主要问题进行解释。提前致谢。

Answer 1

我假设您正在谈论“Hello World”NativeScript 应用程序，可以在here 中找到该应用程序。 。不同之处在于main-page.js是 main-page.xml 的“代码隐藏” (请注意，命名约定对于 {N} 进行匹配很重要)并且 main-view-model.js 是一个单独的文件，已作为 bindingContext 分配给主页的页面.xml 在其 navigatingTo 事件中，如您所见 here :

function onNavigatingTo(args) {
    /*
    This gets a reference this page’s <Page> UI component. You can
    view the API reference of the Page to see what’s available at
    https://docs.nativescript.org/api-reference/classes/_ui_page_.page.html
    */
    var page = args.object;

    /*
    A page’s bindingContext is an object that should be used to perform
    data binding between XML markup and JavaScript code. Properties
    on the bindingContext can be accessed using the {{ }} syntax in XML.
    In this example, the {{ message }} and {{ onTap }} bindings are resolved
    against the object returned by createViewModel().
    You can learn more about data binding in NativeScript at
    https://docs.nativescript.org/core-concepts/data-binding.
    */
    page.bindingContext = createViewModel();
}

为了更改 main-page.xml 的代码隐藏文件中的标签 (TextView) 文本，您可以通过 id 获取标签 (getViewById() example )或直接使用 bindingContext (您的“ViewModel”):

var createViewModel = require("./main-view-model").createViewModel;
var viewModel;

function onNavigatingTo(args) {
    var page = args.object;
    viewModel = = createViewModel();
    page.bindingContext = viewModel;
}

// Example with event handler for a 'tap' event of a Button
function onButtonTap(args) {
    viewModel.set("message", "New message set via code behind");
}