(fu)The "with" binding | Ecency

Purpose(목적)

with 바인딩은 새로운 바인딩 Context를 생성합니다. 그래서 자손엘러먼트들은 특정개ㄱ체의 문맥안에 바인딩 됩니다.

물론 여러분은 if 그리고 foreach와 같은 다른 control-flow바인딩과 함게 with 바인딩을 사용할수 있습니다.

Example 1

여기서는 기본적인 예로 자식객체에 다른 문맥으로 교체하는 예를 보겠습니다. data-bind 특성에 latitude 또는 longitude 는 접두어 coords가필요하지 않습니다 왜냐면 바인딩 Context가 coords로 변경됐기 떄문입니다.

<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
    Latitude: <span data-bind="text: latitude"> </span>,
    Longitude: <span data-bind="text: longitude"> </span>
</p>
 
<script type="text/javascript">
    ko.applyBindings(｛
        city: "London",
        coords: ｛
            latitude:  51.5001524,
            longitude: -0.1262362
        }
    });
</script>

Example 2

상호 작용하는 예:

with 바인딩은 동적으로 해당값이 null/undefined또는 그렇지 않은 값들을 참조하고 있는 자손들을 추가하거나 삭제합니다.
만약 여러분이 부모 바인딩 context로 부터 data/function들에 접근하기 원한다면 여러분은 특별한 context 프로퍼터 즉 $parent그리고 root를 사용할 수 있습니다.

Source code: View

<form data-bind="submit: getTweets">
    Twitter account:
    <input data-bind="value: twitterName" />
    <button type="submit">Get tweets</button>
</form>
 
<div data-bind="with: resultData">
    <h3>Recent tweets fetched at <span data-bind="text: retrievalDate"> </span></h3>
    <ol data-bind="foreach: topTweets">
        <li data-bind="text: text"></li>
    </ol>
 
    <button data-bind="click: $parent.clearResults">Clear tweets</button>
</div>

Source code: View model

function AppViewModel() ｛
    var self = this;
    self.twitterName = ko.observable('@StephenFry');
    self.resultData = ko.observable(); // No initial value
 
    self.getTweets = function() ｛
        twitterApi.getTweetsForUser(self.twitterName(), function(data) ｛
            self.resultData(｛
                retrievalDate: new Date(),
                topTweets: data.slice(0, 5)
            });
        });
    }
 
    self.clearResults = function() ｛
        self.resultData(undefined);
    }
}
 
ko.applyBindings(new AppViewModel());

Parameters

Main parameter(주 파라미터)
자손들의 엘러먼트에 바인딩하고 싶은 context객체
만약 계산값들이 null또는 undefined면 자손 element들은 결고 바인딩 되지 않고 대신 document에서 삭제가 될것입니다.
만약 표현식에서 어떠한 observable값들이 포함되어있다면 표현식은 observable값이 변경됨에 따라 계속 계산될것입니다. 다음으로 자손 element들은 깨끗이 정리될것입니다. 그리고 새로은 markup의 복사본이 document에 추가되고 새로운 계산결과의 문맥에 바인딩 될것입니다.
Additional parameters(추가 파라미터)
- None(없음)

Note 1: 컨테이너 요소 없이“with”사용하기

다른 control flow요소처럼(if,foreach) 여러분은 with를 컨테이너 요소없이 쓸수 있습니다. 다음 예를 보십시오.

Example:

<ul>
    <li>Header element</li>
    <!-- ko with: outboundFlight -->
        ...
    <!-- /ko -->
    <!-- ko with: inboundFlight -->
        ...
    <!-- /ko -->
</ul>