首页 文章

Nativescript Pro UI - DataForm

提问于
浏览
1

我正在为使用Telerik UI Pro组件(没有支持)并且在使用DataForm时遇到了一些问题 .

当我将对象传递给页面上下文时,使用Picker编辑器的所有字段都无法选择正确的值 .

我将展示我写的代码:

泰斯特-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>

字段值应显示“VALUE 1”,但显示“VALUE 0”:

enter image description here

解决这个问题的任何提示?

Update

我已经做了弗拉基米尔推荐的更改但是选择器属性仍然没有反映对象的变化 .

我还在页面上添加了一个按钮,用随机值填充数据表单 . 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));
}

泰斯特-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;

1 回答

  • 0

    看起来您正在对一个简单的JavaScript对象( model )进行运行时更改,这就是为什么这些更改没有反映在RadDataForm中 . 当所需的行为是能够在运行时更改某些对象属性时,您可以使用位于 tns-core-modulesdata/observable 模块的 Observable . 之后使 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));
    

    您还可以查看nativescript-telerik-ui-samples GitHub存储库的master分支中的TypeScript variant,该存储库已更改以说明此方案 .

相关问题