Причём тут шаблонизаторы, или размер кода.
Я не это пытаюсь донести. Я не полный псих чтобы angular серьёзно заменять jQuery. То что я написал это хардкор, по принципу могу жопой пропердеть концерт рахманинова.
Я сделал важную вещь, я создал два независимых компонента и отправил их в чёрный ящик.
с точки зрения пользователя компонентов приложение выглядит так.
<script>
$('#contr1').each(function(){
var me=$(this);
me.data('imglist',[
'http://cs402424.vk.me/v402424516/5f39/j9NEVbzaFho.jpg',
'http://cs540109.vk.me/c540101/v540101247/1e08/h5zYSV2a3C8.jpg',
'http://cs413921.vk.me/v413921890/1b63/q1lALPeD_9k.jpg',
'http://cs413921.vk.me/v413921890/1b52/gfODdvg3BeU.jpg',
'http://cs540109.vk.me/c540101/v540101247/1dfa/9tZrEKSJUPs.jpg',
'http://cs540109.vk.me/c540101/v540101247/1dec/IdbEO_5ghdE.jpg',
'http://cs417724.vk.me/v417724583/9737/OmJeOnhTQ9I.jpg'
])
me.data('selectitem',0);
//оповестим плагины об изменении данных
me.trigger('change-imglist');
me.trigger('change-selectitem');
})
</script>
<div id="contr1" class="controller">
<menu data-source="imglist" select="selectitem"></menu>
<slide data-source="imglist" select="selectitem"></slide>
</div>
У тебя все кишки на виду.
<script>
ui.module['Slideshow'] = function($, scope) {
scope.active = 0;
$.on('keydown(left)', function() { scope.active-- });
$.on('keydown(right)', function() { scope.active++ });
var srcs = [
'http://cs402424.vk.me/v402424516/5f39/j9NEVbzaFho.jpg',
'http://cs540109.vk.me/c540101/v540101247/1e08/h5zYSV2a3C8.jpg',
'http://cs413921.vk.me/v413921890/1b63/q1lALPeD_9k.jpg',
'http://cs413921.vk.me/v413921890/1b52/gfODdvg3BeU.jpg',
'http://cs540109.vk.me/c540101/v540101247/1dfa/9tZrEKSJUPs.jpg',
'http://cs540109.vk.me/c540101/v540101247/1dec/IdbEO_5ghdE.jpg',
'http://cs417724.vk.me/v417724583/9737/OmJeOnhTQ9I.jpg'
];
$('slide').model({position: 'middle', src: ''});
$('slide').repeat('src', srcs);
$('slide').watch('active', function(i, scope) {
var active = scope.active;
scope.position = (i < active) ? 'left' : (i > active) ? 'right' : 'center';
});
$('menu-item').model({index: 0}).repeat(srcs).each(function(i, scope) {
scope.index = i;
}).on('click', function(e, i) {
scope.active = i;
});
};
</script>
<div ui="Slideshow{ #myMenu toggle }">
<ul class="Slideshow">
<img ui="Slideshow-slide" src="{{src}}" class="Slideshow_slide slide_{{position}}">
</ul>
<ul>
<li ui="Slideshow-menu-item">слайд {{index}}</li>
</ul>
</div>
Кода на функционал конечно меньше чем у jQuery, но то что ты с его помощью разрабатываешь слишком сложно использовать. И я немогу добится от тебя примера где бы ты показал что я могу разработать деталь которую удобно встроить.
Я не хочу писать вот такую парашу каждый раз когда мне нужен слайдер.
<div ui="Slideshow{ #myMenu toggle }">
<ul class="Slideshow">
<img ui="Slideshow-slide" src="{{src}}" class="Slideshow_slide slide_{{position}}">
</ul>
<ul>
<li ui="Slideshow-menu-item">слайд {{index}}</li>
</ul>
</div>
неужели так сложно понять
ДАЙ МНЕ НОРМАЛЬНЫЙ ИНТЕРФЕЙС ДЛЯ ИСПОЛЬЗОВАНИЯ КОМПОНЕНТОВ И Я ОТ ТЕБЯ ОТСТАНУ :)
Я раз 10 уже пинал тебя за это :)
