Aurelia checkbox внутри кнопки

Question

Я пытаюсь установить флажок внутри кнопки, и оба щелчка на флажке или кнопка должны переключать флажок и логическое значение, привязанное к нему из модели представления.

app.html:

<template> 
    <h1>${heading}</h1> 
    <button type="button" click.trigger="toggleIsChecked()"> 
    <input type="checkbox" checked.bind="isChecked"> ${isChecked} 
    </button> 
</template> 

app.ts:

export class App { 
    isChecked: boolean; 

    toggleIsChecked() { 
     this.isChecked = !this.isChecked; 
    } 
} 

Что происходит, что при нажатии на кнопку (вне флажком) все работает, как ожидалось. Но когда я нажимаю флажок, логическое значение в модели просмотра изменяется, но флажок не установлен или не установлен. Что может быть причиной этого?

Я пробовал разные подходы, но все они дают похожие результаты. Во время отладки я заметил, что флажок проверяется, но что-то в рамках Aurelia удаляет его почти мгновенно. Похоже, обработка событий не работает должным образом?

EDIT: Я сделал суть, так что вы можете попробовать это сами: https://gist.run/?id=4a7b2c11db33bdb37213eb4ea1b5b2b0

Answer 1

То же объяснение с Фабио Луз & собирается сделать то же самое, но вместо проверки событий имя целевого тега, Вы можете использовать поведение привязки self, как это

<template> 
    <require from='./self'></require> 
    <h1>${heading}</h1> 
    <button type="button" click.delegate="toggleIsChecked() & self"> 
    <input type="checkbox" checked.bind="isChecked"> ${isChecked} 
    </button> 
</template> 

Что self связыванию поведение делает здесь, чтобы обеспечить toggleIsChecked только пожары при нажатии на саму кнопку, а не его потомок, то же самое с этим блоком кода:

toggleIsChecked(event) { 
    if (event.target === this.button) { 
    // Do your thing 
    } 
} 

Примечание:self только что слились, но еще не выпущен. Я включил код в этом суть: https://gist.run/?id=5e66dfd996d852344a524010ae82a936

Вы можете прочитать больше о PR здесь: https://github.com/aurelia/templating-resources/pull/263

Answer 2

Это не основа Aurelia, что «удаление» проверку. Что происходит в том, что при нажатии на флажок, то isChecked автоматически устанавливается на true, затем toggleIsChecked() обжигают и isChecked установлен в false (isChecked установлен дважды при нажатии флажок). Чтобы решить эту проблему, вы не должны устанавливать isChecked, если цель checkbox. Что-то вроде этого:

JS

toggleIsChecked(event) { 
    if (event.target.tagName === 'INPUT') { 
    return true; //checkbox has been clicked, do nothing! 
    } 
    this.isChecked = !this.isChecked; 
} 

HTML

<button type="button" click.trigger="toggleIsChecked($event)"> 
    <input type="checkbox" checked.bind="isChecked"> ${isChecked} 
</button> 

Answer 3

Добрые люди в чате Aurelia GITTER предоставил мне ответ. То, что происходит в моем сущности, заключается в том, что обработчик события по умолчанию не вызывается. Причина этого заключается в том, что Aurelia автоматически вызывает функцию event.preventDefault(). Чтобы вызвать обработчик события по умолчанию, я должен вернуть true из моего собственного обработчика событий.Вот рабочий принцип, доказывающий, как он работает: https://gist.run/?id=3cb545572065cffd737f98788a4105a1

Благодарим всех вас за ответы. Я решил ответить на это сам, так как получил ответ от чата Gitter, но это престиж относится к удивительному сообществу Aurelia и особенно к @CasiOo.