Я учусь/работаю с нокаутом/дурандалом и пытаюсь построить свой первый переход.
У меня есть строка из трех кнопок - позвоните им "tab1", "tab2" и "tab3".
Каждая кнопка имеет связанное с данными событие click для метода в моей модели просмотра - "selectTab1", "selectTab2" и "selectTab3".
При запуске события click устанавливают свойство visibleable в моей модели просмотра под названием "selectedTabModelProperty", которая, как оказалось, связана с композицией.
Итак, что должно произойти, я нажимаю кнопку, композиция понимает, что модель была изменена, и переход выполняется. И волшебным образом, это похоже на работу с табуляцией.
Теперь я пытаюсь добавить функцию "переключение". Когда я нажимаю кнопку активной активной вкладки, я хочу ее скрыть. По сути, я установил свойство модели композиции в "null", которое скрывает compose div. Также круто...
Переход довольно прямолинейный. См. Код ниже - он просто оживляет высоту панелей между 0 и их высотой.
Теперь для моей проблемы. В durandal документации о переходах я обнаружил, что "context.activeView" является "старым" представлением/вкладкой, а (context.child) является "новым" представлением/вкладкой. Если я запустил приложение и выбрал первую вкладку, отмените выбор первой вкладки и попытайтесь выбрать вторую вкладку, перед тем, как вторая вкладка оживит ее, будет задержка.
Я заметил это, вставив большие длительности анимации. Кажется, что, когда я снимаю флажок с вкладки (и скрываю скомпилированный div, содержащий tab1), он не сбрасывает свойство "context.activeView" равным нулю, как я ожидал. Так что на самом деле происходит переход - это попытка закрыть открывающуюся панель (которая фактически не открыта, так что она просто сидит там), прежде чем открывать новую вкладку.
Поэтому мои вопросы: я ошибаюсь в том, как работает свойство activeView? Есть ли другой способ избавиться от сложенного div, чтобы он был правильно скрыт? Может ли это быть проблемой с дюрандалом?
Мой HTML:
<button data-bind="click: selectTab1">tab1</button>
<button data-bind="click: selectTab2">tab2</button>
<button data-bind="click: selectTab3">tab3</button>
<!-- ko compose: { model: selectedTabModelProperty(), transition: 'slideUpDown' } -->
<!-- /ko -->
Мой переход:
var slideUpDown = function (context) {
return system.defer(function (dfd) {
function endTransition() {
dfd.resolve();
}
var oldPanel = $(context.activeView);
var newPanel = $(context.child);
if (newPanel.length == 0)
{
oldPanel.animate({ height: '0px' }, 1000, 'swing', function () {
oldPanel.css({ height: '', display: 'none' });
startTransition();
});
}
else
{
function startTransition() {
context.triggerAttach();
if(newPanel != null && newPanel.length != 0) {
var newPanelHeight = newPanel.height();
newPanel.css({ height : "0px", display : 'block' });
newPanel.animate({ height : newPanelHeight }, 1000, 'swing', function() {
newPanel.css({ height : '', display : '' });
endTransition();
});
}
}
if (oldPanel.length != 0) {
oldPanel.animate({ height: '0px' }, 1000, 'swing', function () {
oldPanel.css({ height: '', display: 'none' });
startTransition();
});
}
else
{
startTransition();
}
}
}).promise();
};
Моя модель просмотра:
this.selectedTabModelProperty = ko.observable();
this.selectTab = function (whichTab) {
switch (whichTab) {
case "tab1":
{
this.selectedTabModelProperty(myVM1);
break;
}
case "tab2":
{
this.selectedTabModelProperty(myVM2);
break;
}
case "tab3":
{
this.selectedTabModelProperty(myVM3);
break;
}
default:
{
this.selectedTabModelProperty(null);
break;
}
}
};
this.selectTab1 = function () {
if(this.selectedTabModelProperty() == myVM1) {
this.selectedTabModelProperty(null);
return;
}
this.selectTab("tab1");
};
this.selectTab2 = function () {
if(this.selectedTabModelProperty() == myVM2) {
this.selectedTabModelProperty(null);
return;
}
this.selectTab("tab2");
};
this.selectTab3 = function () {
if(this.selectedTabModelProperty() == myVM3) {
this.selectedTabModelProperty(null);
return;
}
this.selectTab("tab3");
};
Извините, я просто задержу доллар в идиотской банке... Как-то я перенес "startTransition" с "endTransition".
if (newPanel.length == 0)
{
oldPanel.animate({ height: '0px' }, 1000, 'swing', function () {
oldPanel.css({ height: '', display: 'none' });
**endTransition();**
});
}