Nativescript Observable not binding

Question

我試圖將圖像列表的visibility屬性綁定到數組。

以下是我有：

XML標記

<GridLayout id="menu"> 
     <Image src="{{ ... }}" tap="menuItemTap" id="explore" visibility="{{ menuItemsArray[0].visibility }}" /> 
     <Image src="{{ ... }}" tap="menuItemTap" id="community" visibility="{{ menuItemsArray[1].visibility }}"/> 
     <Image src="{{ ... }}" tap="menuItemTap" id="profile" visibility="{{ menuItemsArray[2].visibility }}"/> 
     <Image src="{{ ... }}" tap="menuItemTap" id="ranking" visibility="{{ menuItemsArray[3].visibility }}"/> 
     <Image src="{{ ... }}" tap="menuItemTap" id="camera" visibility="{{ menuItemsArray[4].visibility }}"/> 
    </GridLayout> 

正如你所看到的，我結合visibility到menuItemsArray，這是可觀察到的定義爲以下的部分：

OBSERVABLE

mainObservable = new Observable({ 
    currentActive:"explore", 
    menuItemsArray:[ 
     new MenuItem("explore"), 
     new MenuItem("community"), 
     new MenuItem("profile"), 
     new MenuItem("ranking"), 
     new MenuItem("camera") 
    ] 
}); 

menuItemsArray是MenuItem對象，其具有2個屬性的數組：name和visibility，後者被綁定到的圖像。

編輯 在此，我也張貼MenuItem類

菜單項

var menuitem = function(name,visibility){ 
    var _name = name; 
    var _visibility = visibility || "collapsed" ; 
    Object.defineProperty(this,"visibility",{ 
      get : function(){ 
       return _visibility; 
      }, 
      set : function(visibility){ 
       _visibility = visibility; 
       console.log("called set-> visibility to " + _visibility); 
      } 
     }); 
    Object.defineProperty(this,"name",{ 
     get : function(){ 
      return _name; 
     }, 
     set : function(name){ 
      _name = name; 
     } 
    }) 
} 

按@ peterstaev的建議，我也試過如下：

菜單項

class MenuItem extends Observable{ 
    constructor(name,visibility){ 
     super(); 
     this._name = name; 
     this._visibility = visibility || "collapsed"; 

    } 
    get visibility(){ 
     return this._visibility; 

    } 
    set visibility(visibility){ 
     this._visibility = visibility; 
     console.log("called set-> visibility to " + this._visibility); 
    } 
    get name(){ 
     return this._name; 
    } 
    set name(name){ 
     this._name = _name; 
    } 
}; 
module.exports = MenuItem; 

有趣visibility設置爲"collapsed"每默認情況下，並且，事實上，沒有任何圖像出現（這是所希望的行爲）。但是，如果切換visibility到"visible" - mainObservable.menuItemsArray[0].visibility = "visible" - 它不會影響圖像，因爲它不會顯示。 是什麼導致這個問題？我不正確地使用Observable嗎？

Answer 1

當您更改可見性時，應該使用set方法的observable，以便正確通知綁定對象的更改。所以，你應該使用：

mainObservable.menuItemsArray[0].set("visibility", "visible"); 

Answer 2

這裏是我的方法你塞納里奧：

在page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo"> 
    <DockLayout id="menu"> 
     <ListView items="{{ menuItems }}" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap"> 
      <ListView.itemTemplate> 
       <StackLayout> 
        <Image src="res://icon" stretch="none" visibility="{{ $value.visibility ? 'visible' : 'collapsed' }}" /> 
       </StackLayout> 
      </ListView.itemTemplate> 
     </ListView> 
    </DockLayout> 
</Page> 

在page.js

"use strict"; 
var observable_1 = require("data/observable"); 
var observable_array_1 = require("data/observable-array"); 

var MenuItem = (function (_super) { 
    __extends(MenuItem, _super); 
    function MenuItem(name) { 
     _super.call(this); 
     this._name = name; 
     this._visibility = false; 
    } 

    Object.defineProperty(MenuItem.prototype, "name", { 
     get: function() { 
      return this._name; 
     }, 
     set: function (value) { 
      this._name = value; 
     }, 
     enumerable: true, 
     configurable: true 
    }); 

    Object.defineProperty(MenuItem.prototype, "visibility", { 
     get: function() { 
      return this._visibility; 
     }, 
     set: function (value) { 
      this._visibility = value; 
      this.notifyPropertyChange("isVisible", value); 
     }, 
     enumerable: true, 
     configurable: true 
    }); 
    return MenuItem; 
}(observable_1.Observable)); 

var itemsObservableArray = new observable_array_1.ObservableArray([ 
    new MenuItem("explore"), 
    new MenuItem("community"), 
    new MenuItem("profile"), 
    new MenuItem("ranking"), 
    new MenuItem("camera") 
]); 

var viewModel = new observable_1.Observable({ 
    currentActive: "explore", 
    menuItems: itemsObservableArray 
}); 

function navigatingTo(args) { 

    var page = args.object; 
    itemsObservableArray.getItem(0).set("visibility", true); 
    itemsObservableArray.getItem(1).set("visibility", true); 
    itemsObservableArray.getItem(2).set("visibility", true); 
    page.bindingContext = viewModel; 
} 
exports.navigatingTo = navigatingTo;