Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 13.06.2019, 00:41
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 957

Сообщение от ethereal
Это framework. Я не хочу менять что бы не испортить что то.
Так выберите качественный framework, при помощи которого вы сможете решать такие задачи легко... Например, React.js, высокий уровень использования, высокий уровень удовлетворённости. Это технология, которую можно спокойно использовать.

Сложно ли выучить новый framework? На самом деле нет, вот, например, μ-framework hyperapp, я о нём ещё 20 минут назад ничего не знал, решил посмотреть в интернете, какие есть, и был приятно удивлён разнообразию. hyperapp позволяет декларативно описать ваш интерфейс. Легко расширяется при помощи JSX. Ваш пример с использованием hyperapp...
<!DOCTYPE html>
<html lang="en">
<body>
	<div id="app"></div>
	<style>
		ul>li:not(.show) {
			text-decoration: line-through;
		}
	</style>
	<script type="module">
		import { h, app } from "https://unpkg.com/hyperapp@2.0.0-beta.22/src/index.js";
		
		const items = ["text 1", "text 2", "text 3", "text 4"];
		
		app({
			init: () => false,
			view: state => h("ul", {}, items.map(item =>
				h("li", {
					class: state ? "show" : "",
					tabIndex: 0,
					onFocus: state => true,
					onBlur: state => false
				}, item))
			),
			node: document.getElementById("app")
		})
	</script>
</body>

</html>


Насчёт jQuery, те кто его используют, ощущают низкий уровень удовлетворённости. jQuery является технологией, которую лучше избегать в настоящий момент.
Ответить с цитированием
  #12 (permalink)  
Старый 13.06.2019, 01:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,102

Malleys,
Ответить с цитированием
  #13 (permalink)  
Старый 13.06.2019, 12:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,102

Malleys,
спасибо за hyperapp, но никак не пойму зачем менять DOM по каждому клику, если нужно изменить только класс и чем плохо jQuery?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
        ul>li:not(.show) {
            text-decoration: line-through;
        }
        ul>li:focus{
            outline: none;
        }

    </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
$(() =>{
  const items = ["text 1", "text 2", "text 3", "text 4"],
        html = items.map(text => $("<li>",{tabIndex: 0, text})),
        li = $("<ul>", {html})
        .replaceAll("#app")
        .on("focusin focusout", "li", ({type}) => li.toggleClass("show", type == "focusin")).
        find("li");
});
  </script>
</head>

<body>
<div id="app"></div>

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как ng-hide поменять так чтобы он не скрывал элемент, а применял к нему css класс? Djambulat Angular.js 10 01.12.2017 07:53
Присвоить input name такой же как класс у div alex-tiesto jQuery 2 05.03.2017 00:01
Как добавить класс, если div виден пользователю? sovsem-nub Элементы интерфейса 4 20.02.2016 17:16
Как добавить и удалить класс при нажатии на div? Jeick9 Events/DOM/Window 23 10.03.2015 15:05
JS классы - как объединить функции в класс olga153b Events/DOM/Window 3 01.11.2011 12:13