소스가 null/undefined 일 때 템플릿 바인딩이 작동하지 않음

누구든지 내 뷰 모델 또는 템플릿의 문제점을 설명 할 수 있습니까 this example jsfiddle?소스가 null/undefined 일 때 템플릿 바인딩이 작동하지 않음

예상대로 작동하지 않습니다. 기본적으로 뷰 모델에는 객체가 포함되어 있으며 해당 객체는 null입니다. 뷰에는이 객체에 대한 템플릿 바인딩이 있습니다. 이 객체는 null이므로 템플릿을 렌더링해서는 안됩니다. 그러나 템플릿을 렌더링하려고 시도하고 예제에서 실패합니다. 작업 객체가 null이면 템플릿을 렌더링하고 싶지 않습니다.

this article by Ryan에 따르면 뷰 모델에 null 개체가 포함되어 있고이 개체에 대해 "template 바인딩"이 있으면 템플릿을 렌더링하지 않습니다. 여기

내보기 모델 :

var job = function(title) { 
    this.jobTitle = ko.observable(title); 
} 

var ViewModel = function(first, last) { 
    this.firstName = ko.observable(first); 
    this.lastName = ko.observable(last); 
    //this.job = ko.observable(new job("software developer")); 
    this.job = ko.observable(null); 

    this.fullName = ko.computed(function() { 
     return this.firstName() + " " + this.lastName(); 
    }, this); 
}; 

ko.applyBindings(new ViewModel("FirstName", "LastName"));

그리고 이것은이다 : 당신은 당신의 템플릿이 (가)에 데이터 바인딩 '경우'를 사용하는 DIV 바인딩을 둘러싸고 수

<div class='liveExample'> 
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <p data-bind="template: { name: 'editorTmpl', data: job }"></p> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2> 
</div> 

<script id="editorTmpl" type="text/html"> 
    Job: <input data-bind='value: jobTitle' /> 
</script>

출처

2014-05-18 Hitesh

linked artifice 거의 삼년 전에 작성되었습니다. 그 당시 Knockout의 최신 버전은 1.2.1이었습니다.

그리고 녹아웃에

는 코드가 잘 작동 1.2.1 : 그것은 더 이상이 문제가 지원되지 않도록

Demo using KO 1.2.1 그러나 그 이후 넉 아웃이 많이 변경되었습니다.

요즘 당신은 if option of the template 바인딩

<p data-bind="template: { name: 'editorTmpl', if: job, data: job}"></p>

데모 JSFiddle를 사용해야합니다.

<div class='liveExample'> 
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <!-- ko with: job --> 
     <p data-bind="template: { name: 'editorTmpl'}"></p> 
    <!-- /ko --> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2> 
</div>

데모 JSFiddle : 같은 결과를 달성하기 위해 바인딩

또는 with (if).

출처

2014-05-18 10:08:02 nemesv

당신이 말하는 것은 시도이지만, 이것은 Ryan의 예와 ko 3.0을 사용한 바이올린입니다. 그것은 잘 작동합니다 : http://jsfiddle.net/z54Ag/ –

@ GôTô 아니오 잘 작동하지 않습니다 ...'li'은'result'로 표현되고,'selectedItem'은 null로 나타납니다. – nemesv

그래, 적어도 오류는 발생하지 않는다. 왜 다른 사람이 아니라 오류를 throw하는지 어떤 생각? –

직업 관측 가능 :

<div data-bind="if: job"> 
    <p data-bind="template: { name: 'editorTmpl', data: job }"></p> 
</div>

job이 null이면 편집자 템플릿이 숨겨지고 null이 아닌 경우 표시됩니다.

는 편집 :

는

더 나은 솔루션 바인딩 템플릿에 '만약'옵션을 전달하는 것입니다 :

<p data-bind="template: { if: job, name: 'editorTmpl', data: job }"></p>

출처

2014-05-18 10:06:26 mathewbergt

소스가 null/undefined 일 때 템플릿 바인딩이 작동하지 않음

답변

관련 문제