템플릿에 typeahead.js 바인딩

Question

나는 hogan 템플릿에 사용자 이미지에 대한 내 선심을 바인딩하고 코드는 실제로 잘 작동하지만 리소스를 얻으려고하면 콘솔에 오류가 발생합니다. localhost : ####/% 7B % 7BuserBlankImgUrl % 7D % 7D

유일한 의미는 값을 기다리는 대신 템플리트 값에 바인드하려고한다는 것입니다.

전체 공개 : 내 앱은 DurandalJS 및 knockoutJS를 사용하고 있지만 아래 관련 코드를 표시하려고했습니다. 나는 제안에 더 많은 것을 포함 할 것이다.

템플릿 :

<img class="quarc-avatar-list-item" src="{{userBlankImgUrl}}" /> 

JS : 나는 시도

self.userImgUrl = ko.computed(function() { 
     return avatar.fromGravatar(self.email(), self.gender()); 
    }); 

다른 일들은 다음과 같습니다

1. 그렇게 시도하고 바인드하지 않습니다 널 (null) 검사에서 템플릿을 배치.
2. 템플릿 hmtl을 제거하면 브라우저 콘솔에 리소스 오류가 표시되지 않습니다.
3. 다른 옵션을 찾기 위해 hogan 및 typahead 옵션을 더 배우려고 시도했습니다. 미리 렌더링하거나 기본 "로컬"값을 설정하는 것이 도움이 될지 확실하지 않은가요?

감사합니다,

크리스

Answer 1

내가 주목하는 첫번째 일은 당신의 self.userImgUrl가 아닌 템플릿에 사용되는 것과 동일한 userBlankImgUrl - 이것은 의도적 인 경우가 게시 된 조각에서 분명하지 않다.

그러나 어떤 시점에서 스크립트는 템플릿을 템플릿 개체의 render() 메서드를 통해 실행하지 않고 출력합니다. 잘못된 요청은/image 태그의 src 속성이 literalally "{{userBlankImgUrl}}"이 원인입니다. 로컬 서버에서 귀하의 응용 프로그램을 테스트하는 것 같아요, 주소는 # http://localhost/.../{{userBlankImgUrl}} (귀하의 질문에 ### 그냥 경로를 줄이거 나 숨기기 않는 경우가 아니라면 정말 localhost에서 요청하는 : ####/% 7B % 7BuserBlankImgUrl % 7D % 7D - 문제 (또는 적어도 그 일부)가 같은 경우).

var template = Hogan.compile(
    '<img class="quarc-avatar-list-item" src="{{undefinedVariable}}" />' 
); 
console.log(template.render({var1: "Test", var2: "Again"})); 

윌의 출력은 콘솔에 :

<img class="quarc-avatar-list-item" src="" /> 

을 아무것도 src 속성이나 나타나는 경우

Hogan.js는 렌더링 템플릿에 나타나는 정의되지 않은 handlebar'd 변수를 제거 어떤 {{templateVar}}의 위치에 null 또는 undefined 값이 주어진 경우 적절한 렌더링 방법을 거치지 않고 템플릿이 출력되었음을 알 수 있습니다.