Да, по поводу биндинга функции в шаблоне вы правы. Я в своем время долго решал какой вариант оставить. Почему-то запомнилось как будто оставил вариант с учетом всех вызовов.
Сейчас прикинул все варианты и вернулся к тому же. Выполнять функцию снова все-таки лучше при изменении аргументов, а не содержимого тела.
Выглядит как лишняя сущность, было бы красивее разместить данные в this он бы и был this в html.
Не совсем, в выражениях может быть что угодно, хоть ${ console.log('Hello') } хоть ${ window.location.href }
Область видимости по умолчанию весь window. Если нужно изменить это поведение, то достаточно дописать метод Component.parse как вам надо.
Даже не так — если меняется любая отслеживаемая переменная, то вы делаете полный dirty-checking — проверяете все отслеживаемые переменные. При этом если данные в scope меняются, которые выводятся через функцию ${this.fullName()} — то обновления не происходит, недоработка.
Данные которые будут в функции тоже начнут отслеживаются. Слежка происходит не на уровне парсинга этой строки. Тут все гораздо хитрее.
И еще момент, хоть отслеживается и каждое свойство скоупа отдельно, но синхронизация с шаблоном происходит группами. То есть если пройтись циклом и изменить 1000 значений в скоупе, то произойдет всего 1 операция изменения разметки, а не 1000.
Дело в том что компиляция идет сверху вниз по дереву, элемент за элементом, поэтому если нужно что-то сделать с дочерними элементами из родительского после его компиляции, то мы также используем resolved. В нем все дочерние компоненты будут гарантировано скомпилированы, в этом его смысл.
В целом, метод resolved используем когда нужен доступ к детям.
Такой лайфцикл позволяет работать с компонентами, почти так как это происходит в DOM:
В примерах ниже левая и правая части эквивалетны:
Изменения отслеживаются с помощью механизма Proxy.
Работают и отслеживаются ли «js» выражения в шаблоне?
Да, отслеживаются все выражения где есть хоть какая-то переменная скоупа
Зачем нужен scope если есть this?
this в html это и есть scope. Поскольку скоуп был придуман как область видимости разметки, то в ней он является контекстом. В компоненте же есть ссылка на на него, в свойстве scope.
Можно ли сделать вложенный цикл и использовать данные родительского цикла во внутреннем?
Да, каждый скоуп имеет свойство .__parent — ссылку на родительский
Также, подробное описание всех возможностей, включая некоторые тонкости, можно найти в документации.
Смысл все же есть. Бывают, например, группы компонентов, когда их несколько и они завязаны друг на друге. Например посмотрите реализацию табов.
Родительский компонент может захотеть что-то сделать с дочерними. Метод resolved гарантирует, что в нем все дочерние будут полностью скомпилированы и тогда к ним можно обратиться через систему коммуникации компонентов.
1) Не совсем понял, что имеется ввиду под дополнительными зависимостями?
2) Тут согласен, но это скорее просто бонус, разные ситуации бывают. Про то как сделать компоненты модульными я в статье описал.
Сейчас прикинул все варианты и вернулся к тому же. Выполнять функцию снова все-таки лучше при изменении аргументов, а не содержимого тела.
Не совсем, в выражениях может быть что угодно, хоть ${ console.log('Hello') } хоть ${ window.location.href }
Область видимости по умолчанию весь window. Если нужно изменить это поведение, то достаточно дописать метод Component.parse как вам надо.
Данные которые будут в функции тоже начнут отслеживаются. Слежка происходит не на уровне парсинга этой строки. Тут все гораздо хитрее.
И еще момент, хоть отслеживается и каждое свойство скоупа отдельно, но синхронизация с шаблоном происходит группами. То есть если пройтись циклом и изменить 1000 значений в скоупе, то произойдет всего 1 операция изменения разметки, а не 1000.
В целом, метод resolved используем когда нужен доступ к детям.
Такой лайфцикл позволяет работать с компонентами, почти так как это происходит в DOM:
В примерах ниже левая и правая части эквивалетны:
el.querySelector('input') => component.child('input')
el.querySelectorAll('input') => component.children('input')
el.parentNode => component.parent()
Разница только в том, что все методы справа возвращают не элемент, а компонент.
В компонентах Akili есть много разных методов для взаимодействия друг с другом
В приме выше выражение ${ this.__content } заменится на Текст внутри
Изменения отслеживаются с помощью механизма Proxy.
Да, отслеживаются все выражения где есть хоть какая-то переменная скоупа
this в html это и есть scope. Поскольку скоуп был придуман как область видимости разметки, то в ней он является контекстом. В компоненте же есть ссылка на на него, в свойстве scope.
Да, каждый скоуп имеет свойство .__parent — ссылку на родительский
Также, подробное описание всех возможностей, включая некоторые тонкости, можно найти в документации.
Родительский компонент может захотеть что-то сделать с дочерними. Метод resolved гарантирует, что в нем все дочерние будут полностью скомпилированы и тогда к ним можно обратиться через систему коммуникации компонентов.
или
аналог componentWillMount — created
аналог componentDidMount — compiled
То есть конструктор можно вообще и не писать.
2) Тут согласен, но это скорее просто бонус, разные ситуации бывают. Про то как сделать компоненты модульными я в статье описал.