Aureliaでの非同期バインディング

Question

私はAureliaテンプレートの1つに非同期の値をバインドしようとしていますが、明らかに返されるのは[object Promise]です。

私は見事にこのようになります結合挙動を使用してこの問題を解決する方法について説明し、この記事http://www.sobell.net/aurelia-async-bindings/が見つかりました：

// http://www.sobell.net/aurelia-async-bindings/ 
export class asyncBindingBehavior { 
    bind (binding, source) { 
     binding.originalUpdateTarget = binding.updateTarget; 

     binding.updateTarget = a => { 
      if (typeof a.then === 'function') { 
       binding.originalUpdateTarget('...'); 

       a.then(d => { 
        binding.originalUpdateTarget(d); 
       }); 
      } 
      else { 
       binding.originalUpdateTarget(a); 
      } 
     }; 
    } 

    unbind (binding) { 
     binding.updateTarget = binding.originalUpdateTarget; 
     binding.originalUpdateTarget = null; 
    } 
} 

約束は、文字列またはその他の非オブジェクトなどで解決時にこれは完璧に動作変数。

私の約束がオブジェクトで解決されるとどうなりますか？そのオブジェクトの中で必要なプロパティにアクセスするにはどうすればいいですか？

私の場合：${object.property & async}私のテンプレートの中にそれゆえ、失敗するでしょうobject.propertyは約束していません - objectです。

私は私はこのように、asyncの引数としてプロパティを指定することができますハックのビットを追加しました：${object & async:'property'}をそのように私の結合挙動を更新：

// http://www.sobell.net/aurelia-async-bindings/ 
export class asyncBindingBehavior { 
    bind (binding, source, property) { 
     binding.originalUpdateTarget = binding.updateTarget; 

     binding.updateTarget = a => { 
      if (typeof a.then === 'function') { 
       binding.originalUpdateTarget('...'); 

       a.then(d => { 
        if (property) { 
         binding.originalUpdateTarget(d[property]); 
        } 
        else { 
         binding.originalUpdateTarget(d); 
        } 
       }); 
      } 
      else { 
       binding.originalUpdateTarget(a); 
      } 
     }; 
    } 

    unbind (binding) { 
     binding.updateTarget = binding.originalUpdateTarget; 
     binding.originalUpdateTarget = null; 
    } 
} 

しかし、これは、Aのように非常に感じています私にハックすると、object.parent.childのようなより深い属性にアクセスすることもできません。

getValueメソッドを使用しているGitHub：https://github.com/aurelia/templating/issues/81でこの（かなり古い）問題が見つかりました。私はこの方法について聞いたことがないし、使用しようとすると失敗するので、どのように動作するのかわからない...

アイデア？

Answer 1

3番目のパラメータとして関数を指定することで、難点を回避でき、単純なプロパティ抽出以上の柔軟性を実現できます。

あなたはこのような何か書くことができます：transformFunctions検索が必要であろう

export class asyncBindingBehavior { 
    bind (binding, source, transformer="default") { 
     binding.originalUpdateTarget = binding.updateTarget; 
     binding.updateTarget = a => { 
      if (typeof a.then === 'function') { 
       binding.originalUpdateTarget('...'); 
       a.then(d => binding.originalUpdateTarget(transformFunctions[transformer](d))); 
      } else { 
       binding.originalUpdateTarget(a); 
      } 
     }; 
    } 
    unbind (binding) { 
     binding.updateTarget = binding.originalUpdateTarget; 
     binding.originalUpdateTarget = null; 
    } 
} 

を伴うオーレリアバインディングは、HTML-ebbeddedまたはテンプレートディレクティブとして指定されている方法に（すなわち、すべてのparamsは文字列でなければなりません）（？） 。 （？Value Converters）アウレリアは、より良い方法「関数を渡す」ためのより良い方法を提供していますない限り、あなたはこのようなものを記述します。

もちろん

export var transformFunctions = { 
    default: (d) => d, 
    transform1: (d) => d.someProperty, 
    transform2: (d) => d.someProperty.someOtherProperty, 
    transform3: someFunction, 
    transform4: someOtherFunction.bind(null, someData); 
} 

は、あなたが機能をより良い名前を与えるだろう。