Nativescript Observable 不绑定

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 对象的数组，它有两个属性：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 方法，以便正确通知绑定对象进行更改。所以你应该使用：

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

Answer 2

这是我对您的 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>

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