Пользовательский интерфейс Nativescript Pro - DataForm

Я использую компоненты Telerik UI Pro для {N} (без поддержки) и имею некоторые проблемы с DataForm.

Когда я передаю объект в контекст страницы, все поля с помощью редактора Picker не могут выбрать правильное значение.

Я покажу написанный мной код:

teste-model.js

var Value = (function() {
    function Value(text, value) {
        this.text  = text;
        this.value = value;
    }
    return Value;
})();

var ValueModel = (function() {
    function ValueModel() {}

    Object.defineProperty(ValueModel.prototype, "model", {
        get: function () {
            if (!this._model) {
                this._model = new Value("This is a text", "VALUE 1");
            }
            return this._model;
        },
        enumerable: true,
        configurable: true
    });
    return ValueModel;

})();

exports.Value = Value;
exports.ValueModel = ValueModel;

teste.js

var ValueModel = require("./teste-model").ValueModel;

var page;

exports.onPageLoaded = function(args) {
    console.log("Carregando página...");
    page = args.object;
    page.bindingContext = new ValueModel();

    console.log(JSON.stringify(page.bindingContext));
}

teste.xml

<Page loaded="onPageLoaded"
    xmlns:df="nativescript-telerik-ui-pro/dataform">

    <StackLayout>
        <df:RadDataForm id="myDataForm" source="{{ model }}">
            <df:RadDataForm.properties>
                <df:EntityProperty name="text" displayName="Text" index="0" />
                <df:EntityProperty name="value" displayName="Value" index="1" valuesProvider="VALUE 0, VALUE 1, VALUE 2">
                    <df:EntityProperty.editor>
                        <df:PropertyEditor type="Picker" />
                    </df:EntityProperty.editor>
                </df:EntityProperty>
            </df:RadDataForm.properties>
        </df:RadDataForm>
    </StackLayout>

</Page>

В значении поля должно отображаться «ЗНАЧЕНИЕ 1», но должно отображаться «ЗНАЧЕНИЕ 0»:

введите описание изображения здесь

Какие-нибудь советы по решению этой проблемы?

Обновить

Я внес изменения, рекомендованные Владимиром, но свойство picker по-прежнему не отражает изменения объекта.

Я также добавил кнопку на страницу, чтобы заполнить форму данных случайными значениями. Свойство text обычно отслеживает изменение, а свойство picker - нет.

Если я выбираю значение средства выбора и нажимаю кнопку, свойство сбрасывается до первого значения поставщика.

Фактический код:

teste.xml

<Page loaded="onPageLoaded"
    xmlns:df="nativescript-telerik-ui-pro/dataform">

    <StackLayout>
        <df:RadDataForm id="myDataForm" source="{{ model }}">
            <df:RadDataForm.properties>
                <df:EntityProperty name="text" displayName="Text" index="0" />
                <df:EntityProperty name="value" displayName="Value" index="1" valuesProvider="VALUE 0, VALUE 1, VALUE 2">
                    <df:EntityProperty.editor>
                        <df:PropertyEditor type="Picker" />
                    </df:EntityProperty.editor>
                </df:EntityProperty>
            </df:RadDataForm.properties>
        </df:RadDataForm>
        <Button text="change" tap="changeModel" />
    </StackLayout>

</Page>

teste.js

exports.onPageLoaded = function(args) {
    console.log("Carregando página...");
    page = args.object;
    page.bindingContext = new ValueModel();
}

exports.changeModel = function(args) {

    var arr = ["VALUE 0", "VALUE 1", "VALUE 2"];

    page.bindingContext.set("model", new Value(
                Math.random(10000, 99999).toString()
                , arr[Math.floor(Math.random() * arr.length)]
                )
            );
    console.log(JSON.stringify(page.bindingContext.model));
}

teste-model.js

var Observable = require("data/observable").Observable;

var Value = (function() {
    function Value(text, value) {
        this.text  = text;
        this.value = value;
    }
    return Value;
})();

var ValueModel = (function(_super) {
    __extends(ValueModel, _super);

    function ValueModel() {
        _super.call(this);
        this.model  = new Value("This is a texte","VALUE 1");
    }

    Object.defineProperty(ValueModel.prototype, "model", {
        get: function () {
            return this.get("_model");
        },
        set: function(_model) {
            this.set("_model", _model);
        },
        enumerable: true,
        configurable: true
    });
    return ValueModel;

})(Observable);

exports.Value = Value;
exports.ValueModel = ValueModel;

person Matheus Antonelli    schedule 27.10.2016    source источник


Ответы (1)


Похоже, вы вносите изменения во время выполнения в простой объект JavaScript (model), поэтому эти изменения не отражаются в RadDataForm. Когда желаемое поведение состоит в том, чтобы иметь возможность изменять некоторые свойства объектов во время выполнения, вы можете использовать {N} Observable, расположенный в data/observable модуле tns-core-modules. После этого сделайте ValueModel, чтобы расширить его, и измените подпись свойства модели следующим образом:

var observable_1 = require("data/observable");
var ValueModel = (function (_super) {
    __extends(ValueModel, _super);
    function ValueModel() {
        _super.call(this);
        this.model = new Value("This is a text", "INITIAL VALUE 0");
        this.model.value = "VALUE 1";
    }
    Object.defineProperty(PersonViewModel.prototype, "model", {
        get: function () {
            return this.get("_model");
        },
        set: function (value) {
            this.set("_model", value);
        },
        enumerable: true,
        configurable: true
    });
    return PersonViewModel;
}(observable_1.Observable));

Вы также можете взглянуть на вариант TypeScript в главной ветви репозитория nativescript-telerik-ui-samples GitHub, который был изменен для иллюстрации этого сценария.

person Vladimir Amiorkov    schedule 27.10.2016
comment
Владимир, спасибо! Я внес рекомендованные вами изменения, но поле выбора по-прежнему не отражает изменение объекта. - person Matheus Antonelli; 27.10.2016
comment
Можете ли вы воспроизвести это поведение в упомянутом репозитории образцов (github.com/telerik/nativescript -ui-samples / tree / master), с моей стороны он работает как положено? - person Vladimir Amiorkov; 28.10.2016
comment
Я раздвоил репозиторий образцов и изменил файл person-model.ts, чтобы начать объект Person с города Лос-Анджелес. В приложении я вижу это изменение повсюду, кроме настройки свойств, в которой используется редактор выбора для свойства города. - person Matheus Antonelli; 29.10.2016