Nativescript RadListView未绑定到源属性 [英] Nativescript RadListView not binding to source property

问题描述

我正在尝试实现{N} telerik的UI RadListView. 此处是他们的入门指南，我作为参考.

I am trying to implement {N} telerik's UI RadListView. Here is their getting started guide, which I followed as a reference.

我已经设置了以下XML布局:

I have setup the following XML layout :

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

基本上，我将列表视图绑定到包含具有name属性的子元素的rankingsArray.

Basically I am binding the list view to a rankingsArray containing child elements which have a name property.

实际上这是我进行绑定的方式:

In fact here is how I do the binding :

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

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

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

HashtagList是定义为的类:

HashtagList is class defined as :

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对象的定义:

As you can see any HashtagList object has a public rankingsArray property which returns an observable array of Hashtag objects. Here is the definition of the Hashtag object:

hashtag.js

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;

问题是由于某种原因，我收到以下错误:

The problem is that for some reason I get the following error :

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

，屏幕上没有任何显示. 这很奇怪，因为如果我可以毫无问题地访问HashtagList.rankingsArray.getItem(0).name. 是什么原因导致这种现象?

and nothing appears on the screen. This is weird because if I can access HashtagList.rankingsArray.getItem(0).name without problems. What is causing this behavior?

推荐答案

结果是我以错误的方式关闭了label标记...

Turns out I closed the label tag in the wrong way...

错误的方式

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

这篇关于Nativescript RadListView未绑定到源属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！