Nativescript Pro UI - DataForm

Question

我爲{N}（不支持）使用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」，但是顯示 「0值」：

任何提示，以解決這個問題？

更新

我做弗拉基米爾推薦的變化，但在選擇器屬性仍不能反映對象的變化。

我還在頁面中添加了一個按鈕，用隨機值填充數據表單。 text屬性通常會監聽更改，但選取器屬性不會。

如果我選擇一個選取器值並單擊該按鈕，則該屬性將重置爲第一個提供器值。

實際的代碼是：

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中。如果期望的行爲能夠在運行時更改某些對象屬性，則可以使用位於tns-core-modules的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這是爲了說明這種情況而改變的。