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

Question

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

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

list.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 вар HashtagList = требуется ("~/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 объекта:

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 без проблем. Что вызывает такое поведение?

Answer 1

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

НЕПРАВИЛЬНО WAY

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

RIGHT WAY

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