LINUX.ORG.RU
Форум — Web-development  

Обьясните, как называется то, что я хочу и где это достать?

 , ,


0

2

Здравствуйте.

Когда я пробовал angularjs, я восхишался кастомными тэгами. Но чувствовал, что они оверхед для моих нужд.

И вот вчера я понял, чего хочу - шаблонизатор, основанный на тегах, принимающий атрибуты тега в качестве параметров. Что-то вроде сишного препроцессора для мира web.

Объясню на примере. Где-то определена иконка с надписью. Например, вот так: 

<!-- tag texticon -->
<a href={{url}}><img src={{pic}}>{{content}}</a>

Далее, в своей html-страничке я пишу: 

<texticon url="http://upyachka.ru" pic="pepyaka.jpg">Сайт правительства РФ</texticon>

После чего, страничка прогоняется через шаблонизатор (на бэкенде или в браузере) и заменяет тэг texticon на валидную разметку, подставляя атрибуты и контент в нужные места.

★★★★★

Последнее исправление: makoven (всего исправлений: 2)
← Как автоматически заполнить поля на странице при переходе на неё?
Как реализовать такой алгоритм? →

А что мешает в страничке сразу писать как человек?
Звучит как эталонное ненужно.

Goury ★★★★★
()
Ответ на: комментарий от Goury

А что мешает в страничке сразу писать как человек?

Для того же, для чего код разносят по функциям - переиспользование. Что прикажешь делать, если на странице в нескольких местах повторяется один паттерн, со слегка измененным контентом?

В less/scss это, кажется, называется mixin

makoven ★★★★★
() автор топика
Последнее исправление: makoven (всего исправлений: 1)
Ответ на: комментарий от makoven

Вы хотели «шаблонизатор, основанный на тегах, принимающий атрибуты тега в качестве параметров.»

Twig - шаблонизатор, основанный на тегах, принимающий атрибуты тега в качестве параметров.

Определитесь в своих желаниях или не морочьте людям голову.

DevilStar ★
()
Ответ на: комментарий от makoven

Паттерн и шаблонизируй.
Ссылка с картинкой тут никаким боком не виноваты.

переиспользование

Переиспользование имеет смысл только тогда, когда кода становится меньше. А когда его становится только больше — лучше пару раз скопипастить и тем временем подумать о форме своих рук.

Goury ★★★★★
()
Последнее исправление: Goury (всего исправлений: 2)

может быть попробовать универсальный макроязык, например m4?

Xenius ★★★★★
()

Тебе нужен реакт.

A1 ★
()
Ответ на: комментарий от Kilte

Неужели эта лапша из js с кусками html похожа на html-only декларацию из сабжа?

Я такое могу и на angular сделать (придется, правда, добавить парочку фабрик фабрик и сервис-провайдеров)

makoven ★★★★★
() автор топика
Последнее исправление: makoven (всего исправлений: 1)
Ответ на: комментарий от makoven

Никто не заставляет так писать. Везде можно использовать JSX. 

import React from 'react';
import ReactDOM from 'react-dom';

const TextIcon = React.createClass({
    propTypes: {
        url: React.PropTypes.string.isRequired,
        pic: React.PropTypes.string.isRequired
    },
    render() {
        return <a href="{this.props.url}"><img src="{this.props.pic}" />{this.props.children}</a>;
    }
}); 

ReactDOM.render(<TextIcon url="http://upyachka.ru" pic="pepyaka.jpg">Сайт правительства РФ</TextIcon>, mountNode);

лапша из js с кусками html

А в чём польза от разделения JS и HTML? Я считаю, что от этого только одни проблемы.

Kilte ★★★★★
()
Ответ на: комментарий от makoven

У HTML5 есть XML сериализация. Следующий.

Deleted
()

буду неоригинален: xml + xslt

dab18
()

Если React не смущает слишком сильно, посмотри на React templates:

http://wix.github.io/react-templates/

https://github.com/wix/react-templates

Как раз нет смеси разметки и кода, создаешь свои файлы шаблонов, которые позже компилируются в реакт-код (grunt-таском, или через командную строку ./node_modules/.bin/rt)

noomorph ★
()
Последнее исправление: noomorph (всего исправлений: 1)

В твоем примере:
a == texticon
herf == url
src == pic
 В чём смысл? Названия тэгов с параметрами не можешь запомнить?

ashot ★★★★
()
Ответ на: комментарий от Kilte

Не фанат arrow function, если не нужен лексический биндинг. Как то по кейвордам привычнее парсить текст.

zz ★★★★
()
Ответ на: комментарий от anonymous

это известный антипаттерн на базе лапши

.. который теперь в стандарте W3C

Собственно, полифил для Document.registerElement и есть ответ на мой вопрос в сабже. Жаль только что без лапши не обойтись

makoven ★★★★★
() автор топика
Ответ на: комментарий от anonymous

Можно и в <script type=«blabla»> засунуть. Все-равно придется вытаскивать оттуда шаблон джаваскриптом и им же запихивать в шаблон значения.

makoven ★★★★★
() автор топика
Ответ на: комментарий от deep-purple

Это обычный шаблонизатор.

Я хочу так. Пишешь определения кастомных тегов прямо на странице. При загрузке, js пробегает по DOM-дереву и заменяет кастомные теги на их определения, попутно модставляя атрибуты:

<html>
  <body>
    <!-- tag texticon -->
    <a href="url"><img src="pic">{{content}}</a>

    ...

    <texticon url="http://upyachka.ru" pic="pepyaka.jpg">Сайт правительства РФ</texticon>
  </body>
</html>

Т.е. декларация тега находится в самой странице не требует js. Сам напишу. Вроде несложно

makoven ★★★★★
() автор топика
Последнее исправление: makoven (всего исправлений: 1)

То что ты хочешь называется секс. Тебе достать будет крайне трудно.

anonymous
()
Ответ на: комментарий от anonymous

Лапше отсутствие инлайн тегов не помеха :)

zz ★★★★
()
Ответ на: комментарий от Shadow

ssi и сейчат здравствует. Но не умеет в параметры

makoven ★★★★★
() автор топика

Есть у меня свой фрейворк (лет 8 уже использую, иногда дописываю / переписываю) правда он на PHP были планы партировать на С/С++ и Java но последнее время вебом почти не занимаюсь. Но код шаблонов выглядит гдето так: 

<li class="w20">
   <label>No. of Approaches</label>
   <TL:updown name="${ic}_approaches_cnt" onchange="onApproachesChanged(this, '${ic}');" />
</li>
И для тега TL:updown будет вызван глобальный PHP метод 
function TL_updown(&$node, &$html)
{
    global $UpDownIDX;
    if(! isset($UpDownIDX))
    {
      $UpDownIDX = 0;
    }
    $UpDownIDX ++;
    $attr  = '';
    $name  = $node->attrs['name'];
    if( isset($node->attrs['onchange']) )
    {
      $attr .= ' onchange="' . $node->attrs['onchange'] . '"';
    }

    $html  = "<div id=\"UpDown_{$UpDownIDX}\" class=\"updown\">";
    $html .= "<input type=\"text\" name=\"${name}\"{$attr} readonly />";
    $html .= "<a href=\"javascript:changeUpDown({$UpDownIDX},  1);\" class=\"up\"></a>";
    $html .= "<a href=\"javascript:changeUpDown({$UpDownIDX}, -1);\" class=\"down\"></a>";
    $html .= "</div>";
}

Там помимо таглибы есть еще много чего (DB конекторы, SQL генераторы, генерация списков, условия, параметрезированый и динамический SSI, форматированый вывод, кеширование и т.д). За основы был взять старющий XTemplate который помоему уже помер давно - но от него уже кроме идей и синтаксиса уже ничего не осталось. Вот все думаю опубликовать или оно никому не нужно ...

zaz ★★★★
()
Ответ на: комментарий от zaz

Конечно публикой. Что ни делай - PHP-шников все-равно меньше не становится. Но я не один из них, к сожалению (говорила мама «иди в PHP». Давно бы уже жил в москве и получал 120K)

makoven ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Как автоматически заполнить поля на странице при переходе на неё?
Web-development
Как реализовать такой алгоритм? →