Nativescript Pro UI - DataForm

Question

私はTelerik UI Proコンポーネントを{N}（サポートなし）に使用しており、DataFormにいくつかの問題があります。

オブジェクトをページコンテキストに渡すと、ピッカーエディタを使用するすべてのフィールドで正しい値を選択できません。

私は私が書いたコードを示します：

精巣-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"：

これを解決するための任意のヒント？

更新

私はウラジミールは、推奨変更を加えたが、ピッカーのプロパティは、まだオブジェクトの変更を反映していません。

また、ランダムな値でデータフォームを埋めるために、ページにボタンを追加しました。 テキストプロパティは通常変更をリッスンしますが、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; 

Answer 1

それはあなた、あなたのように見えますランタイムの変更を単純にしていますJavaScriptオブジェクト（model）は、これらの変更がRadDataFormに反映されない理由です。実行時にいくつかのオブジェクトのプロパティを変更できるようにするには、のdata/observableモジュールにある{N} 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-サンプルGitHubのリポジトリのマスターブランチにTypeScript variantを見てみることができますこのシナリオを説明するために変更されました。