2016-08-13 4 views
0

Nativescriptでカスタムコンポーネントを作成しようとしています。コンポーネントは静的なデータでうまく動作しますが、そのコントロールにカスタムプロパティを追加したいのですが、そのコードの背後にはアクセスできません。私はMCQのようなボックスやラジオコントロールに似た何かを作成しようとしているので、ユーザは与えられたものから1つのオプションしか選択できません。Nativescriptカスタムプロパティにアクセスできない

CustomControl.xml

<StackLayout orientation="vertical" class="form" loaded="loaded"> 
    <Repeater items="{{ items }}"> 
    <Repeater.itemTemplate> 
     <StackLayout orientation="vertical" tap="itemTapped" id="{{id}}"> 
     <StackLayout orientation="horizontal" verticalAlignment="center"> 
      <Label text="{{text}}" class="form-field" width="88%"/> 
      <Label text="{{characterCode}}" visibility="{{visible ? 'visible' : 'collapsed'}}" class="icon"/> 
     </StackLayout> 
     <StackLayout class="separator"/> 
     </StackLayout> 
    </Repeater.itemTemplate> 
</Repeater> 
</StackLayout> 

CustomControl.js

<CustomComponents:CustomControl items="{{items}}"/> 

としての私のページにそれを使用しようとしているが、args.object.itemsを使用して

var Observable = require("data/observable").Observable; 
var ObservableArray = require("data/observable-array").ObservableArray; 

var _component; 
var _viewModel = new Observable(); 
var _selectedId = null; 

exports.loaded = function(args){ 

    _component = args.object; 

    //passing in _component.items as array throws undefined 
    var items = getInitializedArray(["Some text","Someother text"]); 
    _viewModel.set("items", items); 

    _component.bindingContext = _viewModel; 

} 


exports.itemTapped = function(args){ 
    var id = args.object.id; 

    if(_selectedId === null){ 
    var item = _viewModel.get("items").getItem(id); 
    item.visible = true; 
    _viewModel.get("items").setItem(item, id); 

    }else{ 
    var item = _viewModel.get("items").getItem(_selectedId); 
    item.visible = false; 

    item = _viewModel.get("items").getItem(id); 
    item.visible = true; 
    _viewModel.get("items").setItem(item, id); 
    } 
    _selectedId = id; 
} 

function getInitializedArray(data){ 
    var id=0; 
    var items = data.map((listItem) => { 
    return { 
     text: listItem, 
     characterCode: String.fromCharCode(0xea11), 
     visible: false, 
     id: id++ 
    } 
    }); 
    return new ObservableArray(items); 
} 

は未定義プロパティをスローしますオブジェクト。

私はdependency-observableを使用する必要があり、プラグインを作成する必要があると読んでいます。しかし、私はプラットフォーム固有のものを使用していません、私はただ既存のUIコンポーネントとそれを実現するためのかなり簡単なコンポーネントを作成しています。カスタムプロパティをバインドする方法はありますか?プラグインはこのためには複雑すぎる、どうすれば実現できますか?

+1

この話題は、あなたがコードビハインドだけで済むようにするために、https://github.com/NativeScript/NativeScript/issues/1620#issuecomment-188671352全体的に役立つと思います。 –

答えて

0

ドキュメントを読んだ後、さまざまなフォーラムやgithubの問題を辿って、私が見つけたこととNick llievのコメントに感謝します。

コントロールにカスタムプロパティを与えるには、コードのみのテクニックを使用する必要があります。http://mobile.folio3.com/creating-custom-controls-in-nativescript/は、カスタムコントロールにカスタムプロパティを与える方法を示す両方のテクニックを記述しています。

関連する問題