Aurelia의 비동기 바인딩

Question

내 Aurelia 템플릿 중 하나에 비동기 값을 바인딩하려고합니다. 분명히 얻은 것은 모두 [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; 
    } 
} 

을하지만이 아주 많이 같은 느낌 나를 해킹하고 또한 object.parent.child과 같은 더 깊은 속성에 액세스 할 수 없게됩니다.

또한 getValue 메서드를 사용하는 GitHub : https://github.com/aurelia/templating/issues/81에서이 문제가 발견되었습니다. 나는이 방법에 대해 들어 본 적이 없으므로 사용하지 않으려 고 노력하므로 어떻게 작동하는지 잘 모르겠습니다 ...

아이디어가 있으십니까?

Answer 1

함수를 세 번째 매개 변수로 지정하여 단순한 속성 추출 이외의 다른 작업을 수행 할 수있는 유연성을 제공함으로써 수수께끼를 피할 수 있습니다.

당신은 같은 것을 쓸 수있다 : (?)

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; 
    } 
} 

transformFunctions 조회가 필요할 것이다 인해 아우렐 리아 바인딩은 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); 
} 

, 당신은 기능을 더 나은 이름을 줄 것이다.