Nativescript可观察到未绑定

我正在尝试将图像列表的

可见性

属性绑定到数组

以下是我所拥有的：

XML标记

menuItemsArray

是一组

MenuItem

对象，它们有两个属性：

name

和

visibility

，后者绑定到图像

编辑 我在此也发布了

MenuItem

类

梅努伊特姆

根据@peterstaev的建议，我还尝试了以下方法：

梅努伊特姆

有趣的是，

可见性

默认设置为

“折叠”

，事实上，没有图像显示（这是所需的行为）。但是，如果将

可见性

切换到

“可见”

-

main observable.menuItemsArray[0].visibility=“visibility”

，则不会影响图像，因为它不会显示。

---

是什么导致了此问题？我是否未正确使用可观察对象？

当您更改可见性时，应使用可观察对象的

设置方法，以便它正确通知绑定对象进行更改。因此，您应该使用：

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

以下是我对您的senario的看法：

在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>

@aaronuall:Try
main observable.set（“menuItemsArray[0]。可见性”、“可见”）
您可能还必须使
MenuItem
类扩展
Observable
。我将
MenuItem扩展为Observable。但是
mainObservable.menuItemsArray[0]。设置（可见性，“可见”）未定义可见性
和
main可观察。menuItemsArray[0]。visibility=“visible”不会引发错误，但不会使图像可见
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;
        }
    })
}

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;

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

<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>

"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;