Nativescript RadListView не привязывается к исходному свойству

Я пытаюсь реализовать пользовательский интерфейс {N} telerik RadListView. Вот их руководство по началу работы, которое я следует в качестве ссылки.

Я установил следующий макет XML:

список.xml

<StackLayout loaded="loaded" xmlns:lv="nativescript-telerik-ui/listview" xmlns="http://www.nativescript.org/tns.xsd">
    <lv:RadListView items="{{ rankingsArray }}">
        <lv:RadListView.listViewLayout>
            <lv:ListViewLinearLayout scrollDirection="vertical"/>
        </lv:RadListView.listViewLayout>
    </lv:RadListView>
    <lv:RadListView.itemTemplate>
        <StackLayout orientation="horizontal" horizontalAlignment="center" class="sl_ranking">
            <Label text="{{ name }}"></Label>
        </StackLayout>
    </lv:RadListView.itemTemplate>
</StackLayout>

В основном я привязываю представление списка к rankingsArray, содержащему дочерние элементы, которые имеют свойство name.

На самом деле вот как я делаю привязку:

list.js var HashtagList = require("~/viewmodels/HashtagsList");

exports.loaded = function(args){
    var hashtagList = new HashtagList();
    var profile = args.object;
    profile.bindingContext = hashtagList;
}

HashtagList — это класс, определенный как:

var Hashtag = require("~/classes/Hashtag");
var ObservableModule = require("data/observable-array");
class HashtagList{
    constructor(){
    }
    get rankingsArray(){

        if(!this._list){
            this._list = new ObservableModule.ObservableArray();
            this._list.push(new Hashtag("#pizzawithfriends"));
            this._list.push(new Hashtag("#funky"));
        }

        return this._list;
    }
}
module.exports = HashtagList;

Как видите, любой HashtagList объект имеет общедоступное rankingsArray свойство, которое возвращает observable array из Hashtag объектов. Вот определение объекта Hashtag:

хэштег.js

"use strict";
var Hashtag = function(name){
    var _name = name;
    //====== NAME GETTER & SETTER ======//
    Object.defineProperty(this,"name",{
        get : function(){
            return _name;
        },
        set : function(value){
            _name = value;
        }
    })
}

module.exports = Hashtag;

Проблема в том, что по какой-то причине я получаю следующую ошибку:

Binding: Property: 'name' is invalid or does not exist. SourceProperty: 'name'

и ничего не появляется на экране. Это странно, потому что если я смогу получить доступ к HashtagList.rankingsArray.getItem(0).name без проблем. Что вызывает такое поведение?


person Aaron Ullal    schedule 25.06.2016    source источник
comment
Я только что просмотрел код, нужно ли дважды создавать новый экземпляр HashTagList() в загруженном событии?   -  person Brad Martin    schedule 25.06.2016
comment
@BradMartin нет, извините, я неправильно скопировал код. Только один экземпляр   -  person Aaron Ullal    schedule 25.06.2016


Ответы (1)


Оказывается, я неправильно закрыл тег label...

НЕПРАВИЛЬНЫЙ ПУТЬ

<lv:RadListView.itemTemplate>
        <StackLayout orientation="horizontal" horizontalAlignment="center" class="sl_ranking">
            <Label text="{{ name }}"></Label>
        </StackLayout>
    </lv:RadListView.itemTemplate>

ПРАВИЛЬНО

 <lv:RadListView.itemTemplate>
            <StackLayout orientation="horizontal" horizontalAlignment="center" class="sl_ranking">
                **<Label text="{{ name }}" />**
            </StackLayout>
        </lv:RadListView.itemTemplate>
person Aaron Ullal    schedule 27.06.2016