В чем разница между main-page.js и main-view.model.js при разработке собственных приложений с помощью Telerik App Builder

Question

Как изменить текст textField на основе xml через main-page.js? Я использую this.set("message", getMessage(this.counter)); изменить значения через main-view-model.js. Но этот сценарий не работает, когда я пытаюсь в нем в main-page.js. Как это сделать?:-) И мне нужно объяснение моего основного вопроса. Заранее спасибо.

Answer 1

Я предполагаю, что вы говорите о приложении NativeScript "Hello World", которое можно найти здесь. Разница в том, что main-page.js является "кодом позади" main-page.xml (обратите внимание, что для именования важно {N} соглашение о соответствии), а main-view-model.js - это отдельный файл, который был назначен как bindingContext на страницу main-page.xml в ее событии navigatingTo, как вы можете видеть здесь:

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();
}

Чтобы изменить текст метки (TextView) файла main-page.xml в его файле кода, вы можете получить метку через идентификатор (getViewById() пример) или напрямую использовать 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");
}