저는 knockout을 사용하여 jQueryUI 탭을 추가/삭제하려고했지만 행운이 없었습니다. 내 뷰 모델은 Effect 개체의 배열입니다. 내가 탭을 추가/개체가 추가 /보기 모델에서 제거 탭 컨트롤에서 제거 싶습니다.녹아웃 JS를 사용하여 jQueryUI 탭을 추가하거나 제거하는 방법은 무엇입니까?
여기에 당신이 탭을 추가하려고 할 때이 중단됩니다 JSFiddle example
을 찾고 있어요 보여줍니다 이는 JSFiddle 누군가가 시작 내가 업데이트입니다. 내가 생각하는 탭 컨트롤을 파괴/재현 할 수있는 새로운 사용자 정의 바인딩을 사용하여 템플릿 바인딩을 결합해야한다고 생각합니다. 어떤 도움을 주시면 감사하겠습니다. 감사!
모델이 변경 될 때마다 탭 인터페이스를 다시 렌더링해야 할 가능성이 큽니다. ,
<ul id="tabs">
때마다 모델이 변경
$("#tabs").tabs();
(나는 넉 아웃하지만 난과 이벤트를 해고하는 방법을 확실하지 오전 전화 :
또한, 탭 <ul>에 고유 한 ID를 추가 문서에 있는지 확인하십시오.)
나는 매우 비슷한 문제가있었습니다. 하위 뷰 모델의 최상위 관찰 가능한 배열을 탭으로 표시하고 각 탭에서 손주 데이터에 대한 마크 업을 렌더링하는 심층 뷰 모델 그래프가 있습니다. 원래 Knockout이 만든 후 jQuery UI 탭을 사용하여 마크 업을 표로 만들었습니다.
이러한 탭이있는 뷰 모델/도메인 객체를 추가, 제거 및 복제 할 수있는 기능이 있습니다. jQuery UI 탭을 사용하여 파기를 호출 한 다음 다시 작성해야하는 번거 로움과 중복 된 경우 먼저 새로 만든 탭을 선택하기 위해 선택한 인덱스를 먼저 저장 한 다음 레크리에이션 후 해당 인덱스를 선택해야했습니다.
하지만 이제 MVVM을 내 UI의 드라이버로 완전히 받아들이고 jQuery 탭을 모두 제거하고 탭 헤더와 탭 콘텐츠 요소를 Knockout 뷰 모델의 "isSelected"관측 가능 속성에 바인딩했습니다. . 나는 이것을 훨씬 더 깔끔하게 처리 할 수있는 방법을 찾았으며, 유연성과 탭의 마크 업/CSS를 단순하고 우아하게 보였다.
isSelected 속성은 또한 각 탭에 대해 <div class="child" data-bind="if: isSelected">과 같은 것을 지정하여 바인딩 효율성을 높일 수 있음을 의미합니다. 이전에 (아마) Knockout이 보이지 않는 탭의 모든 바인딩을 통해 불필요하게 작업하고있었습니다.
이것은 내가 지금 내 UI에 일반적으로 접근하려는 방법입니다. 즉, 바인딩을 사용하기 위해 가능한 한 직접 프로 시저 UI를 사용하지 않아야합니다.
나는이 질문을 내가 사용하기 시작한 새로운 해결책으로 업데이트 할 것이라고 생각했다. 나는 이전에 RP Niemeyer의 바이올렛 http://jsfiddle.net/rniemeyer/dsKbH/을 사용하여 KO observableArray에 바인드 된 jQuery UI 탭을 동적으로 추가/제거하기위한 기초로 사용했습니다.
지난 몇 달 동안 나는 앱과 관련된 몇 가지 문제에 대해 a) setTimeout() 지연 및 B) 업데이트가 트리거 될 때마다 탭 위젯을 삭제하고 다시 생성하는 것에 대해 부딪혔다. 그래서 나는 이러한 문제를 피하는 다른 접근법을 생각해 냈습니다. IMHO는보다 세련된 기법입니다.
http://jsfiddle.net/LatencyMachine/XJPJZ/
의 핵심 아이디어는 당신이 당신의 탭 패널 콘텐츠 div의 결합 "탭 패널"이라는 바인딩 매우 간단한 사용자 정의하고 해당 위젯을 소개하는 것입니다. KO가 observableArray를 기반으로 이러한 div를 만들고 제거하면 tabPanel 바인딩은 "새로 고침"메소드를 사용하여 jQueryUI.tabs를 업데이트합니다. 이 작업은 컨테이너 요소의 바인딩에서 (그리고 적시에) 업데이트 할 탭을 얻는 것보다 훨씬 부드럽게 작동합니다. 바이올린에서
관련 코드
/**
KO Binding handler for a tabPanel div. Use this on divs that can appear/disappear and/or have their id change
depending upon an observable, usually an observableArray.
*/
ko.bindingHandlers.tabPanel = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
$(element).tabPanel(ko.toJS(valueAccessor()));
}
};
/**
This widget facilitates jQuery UI tabs that appear and disappear dynamically, usually as a result of MVVM like Knockout
Whenever this widget is created, the containing jQuery UI 'tabs' widget is refreshed so that it picks up the new tab
or drops the removed one.
This also facilitates dealing with id rename 'ripple' that occurs whenever a tab is removed due to the splice of an
observable array.
*/
$.widget("bw.tabPanel", {
options: {
id: null
},
_create: function() {
this.element.hide();
this.tabsElement = this.element.closest(".ui-tabs");
if(this.options.id) {
this.element.attr({id: this.options.id});
}
this.refreshTabs();
},
_destroy: function() {
if(this.options.id) {
this.element.attr({id: ""});
}
this.refreshTabs();
},
_setOption: function(key, value) {
var previousValue = this.options[key];
if(previousValue == value) return;
this.options[key] = value;
switch(key) {
case "id":
this.element.attr({id: this.options.id});
this.refreshTabs();
break;
}
},
/**
Invoke refresh on the parent tab to let it know that something has changed.
This also preserves the active index by setting it back to what it was before the refresh, which
may correspond to a different tab after the refresh.
*/
refreshTabs: function() {
var previousActiveIndex = this.tabsElement.tabs("option", "active");
this.tabsElement.tabs("refresh");
this.tabsElement.tabs("option", "active", previousActiveIndex);
}
});