녹아웃으로 동적 뷰 (ajax 호출을 통해)를 다루는 방법에 대한 인터 웹에 관한 많은 정보가 있지만 동적 뷰 모델에 대한 모범 사례가 있습니까?동적 뷰 모델로 녹아웃
예를 들어, 역할, 사용자 선택, 컨텍스트 등을 기반으로 다양한 유형의 양식 (다른 입력 필드가있는)을 (아약스를 통해) 렌더링하는 단일 페이지 앱이 있다고 가정 해보십시오. 각 양식에 템플릿을 사용할뿐만 아니라 , 각 뷰 모델은 많은 매우 다른 속성을 가질 수 있으며 모든 가능한 템플릿에 대해 하나의 방대한 뷰 모델을 갖는 것이 실용적이지 않기 때문에 뷰 모델에 대해 동일한 작업을 수행하려고합니다.
나는 코와 약간의 신인이며,이 방식으로 사용하기위한 것이 아닙니다. 어떤 조언을 많이 주시면 감사하겠습니다.
이 유형의 작업을 수행하는 일반적인 방법은 하위보기 모델을 호스팅하는 기본보기 모델을 갖는 것입니다.
다음은 템플릿과 관련 데이터가있는 "모델"개체를 정의하는 기본적인 예입니다.
function Model(key, template, data) {
this.key = key;
this.template = ko.observable(template);
this.data = data;
}
var viewModel = {
models: ko.observableArray([
new Model("user", "userTmpl", { first: "Bob", last: "Smith" }),
new Model("item", "itemTmpl", { name: "MyItem", description: "Here are some details" })
]),
selectedModel: ko.observable()
};
ko.applyBindings(viewModel);
그런 다음, 당신이 원하는 사용할 수 있습니다
<select data-bind="options: models, optionsText: 'key', optionsCaption: 'select a model...', value: selectedModel"></select>
<hr />
<div data-bind="with: selectedModel">
<div data-bind="template: { name: template(), data: data }"></div>
</div>
<script id="userTmpl" type="text/html">
<span data-bind="text: last"></span>, <span data-bind="text: first"></span>
</script>
<script id="itemTmpl" type="text/html">
<h3 data-bind="text: name"></h3>
<div data-bind="text: description"></div>
</script>
http://jsfiddle.net/rniemeyer/29kWf/
를 분명히, 당신은 가능성이 선택에서 모델의 선택을 바인딩 할 것이다, 그러나 그것은 어떻게 보여 도움 일할 수있다. 배열보다는 모델이 키와 일치하는 속성 이름을 가진 객체가 될 수 있습니다.
"모델"개체의 "데이터"는 하위보기 모델입니다.
나는 똑같은 문제에 직면 해있다.
내가 더 명확하게 KO를보기 시작 것 같아요, Knockout Namespaces
감사 라이언을보십시오. KO Mapping 플러그인을 추가하여이 방법론을 사용하여 데이터 (첫 번째, 마지막, 이름, 설명 등)를 관찰 가능 항목으로 바인드하는 것이 맞습니까? 내 Scenerio에서 아약스를 통해 데이터를 가져옵니다. 사실, 내가 템플릿과 아약스를 통해 데이터를 모두 가져온다면, 나는 'correctBindings'를 호출하여 Success 콜백에서 모든 것을 올바르게 연결 할 수 있어야한다. 나는 여분의 시간이있을 때 주말에이 일을 할애 할 것이다. – jimlyndon
매핑 플러그인을이 아이디어와 함께 사용하면 좋습니다. 성공 콜백에서'applyBindings'를 호출하는 것이 좋습니다. 두 번째 매개 변수를 전달하여 특정 요소로 제한하고 자손이 아닌 요소에 대해 여러 번 호출하는 경우가 아니면 실제로 한 번만 호출하려고합니다. 그렇지 않으면, 내가 제공 한 샘플에서 applyBindings를 앞에 호출하여 selectedModel이 채워질 때까지 아무 것도 실제로 바인딩되지 않습니다. –