4

親 Ractive の Ractive コンポーネントから作成されたインスタンスにアクセスしたい状況に陥っています。例えば

var myComponent = Ractive.extend(
    {
        uselessFunction: function()
        {
            alert('Hello ' + this.data.who);
        }
    }
);

var myRactive = new Ractive(
    {
        el: 'body',
        components:
        {
            mycomponent: myComponent
        },
        template: '{{#people}}<rv-mycomponent who="{{.}}"/>{{/people}}',
        data:
        {
            people:
            [
                'Mike',
                'Charly',
                'April'
            ]
        }
    }
);

それを実行すると、myComponent の 3 つのインスタンスが取得されます。ここで、myRactive のメソッド内から任意のコンポーネント インスタンスで uselessFunction を呼び出す方法が必要です (または、すべてのインスタンスでさらに優れています)。

もちろん、これを実現するための回避策はたくさんあります (コンポーネントでオブザーバーを使用してから共有プロパティを変更するなど)。残念ながら、myRactive オブジェクトをふるいにかけた限り、コンポーネント インスタンスへの参照が見つからないようです。1 つあると思われますが、myComponent の teardown() が各コンポーネントに対しても teardown() を呼び出していることを確認できます。

4

3 に答える 3

2

更新: この回答は非常に古いものです。子コンポーネントにアクセスする正しい方法は、ractive.findComponent(name)またはractive.findAllComponents(name)

これを行う良い方法はありませんが、可能です：

people = [];

Ractive.components.person = Ractive.extend({
  init: function () {
    people.push( this );
  },
  uselessFunction: function () {
    alert( 'Hello ' + this.get('who') );
  }
};

ractive = new Ractive({
  el: 'body',
  template: '{{#people}}<person who="{{.}}"/>{{/people}}',
  data: { people: [ 'Mike', 'Charly', 'April' ] }
};

// later...
people[0].uselessFunction(); // alerts 'Hello Mike'

(このコードは現在のリリースでは動作しません。0.3.8を使用していると想定しています。これrv-により、コンポーネントをグローバルに登録することができなくなりますRactive.components。)

私が言うように、それはかなりエレガントではありません。これに対処する最善の方法を見つけようとしています。私が調査している 1 つのアプローチは、および (/ に似ています) を許可ractive.find()してractive.findAll()、コンポーネント (例: ) と DOM ノードを検索することです。それまでの間、どんな提案もお待ちしております！ractive.el.querySelector()ractive.el.querySelectorAll()ractive.findAll('people')

于 2013-11-27T21:57:28.860 に答える
1

.findComponent()のように見えますが、これは現在行われています:

ractiveInstance.findComponent( name )
于 2016-11-17T10:53:20.843 に答える
0

私が使用する同様のソリューションは次のとおりです。

Ractive.defaults.isolated=true;
componentsHash = {};  // GLOBAL
Ractive.defaults.oninit=function(){
    if (this.get('ref'))
        componentsHash[this.get('ref')]=this;
};
Ractive.defaults.onteardown=function(){
    if (this.get('ref') && componentsHash[this.get('ref')])
        delete(componentsHash[this.get('ref')]);
};

オブジェクト「componentsHash」には、作成されたすべてのコンポーネントへの参照が含まれています。

使用法：

<some-component ref="Mike1"/>
<some-component ref="Mike2"/>

次に、次を使用して、Mike1 コンポーネント インスタンスを見つけることができます。

componentsHash['Mike1']
于 2016-06-09T08:38:29.720 に答える