Nativescript RadListView 未绑定到源属性答案

【问题标题】：Nativescript RadListView not binding to source propertyNativescript RadListView 未绑定到源属性
【发布时间】：2016-11-29 18:54:37
【问题描述】：

我正在尝试实现 {N} Telerik 的 UI 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 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对象的定义：

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。是什么导致了这种行为？

【问题讨论】：

我只是浏览了代码，您是否应该在加载的事件中创建 HashTagList() 的新实例两次？
@BradMartin 不抱歉，我复制了错误的代码。只有一个实例

标签： telerik observable nativescript nativescript-telerik-ui

【解决方案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>

【讨论】：