Унылого треша тред

[DjDiablo]

Причём это можно даже на голом jQuery реализовать

не буду голословным.

в демки три компонента, все слабо связанны между собой. Для хардкора не испозованы даже хелперы.
Собственно это просто доказательство возможности, на angular это проблема конечно изящнее решается.
в демках UI я вообще не ивдел никогда декомпозиции, походу её там тупо нет.

всё описание использования и взаимодействия компонентов занимает 4 строчки.

<div id="contr1" class="controller">
  <menu data-source="imglist" select="selectitem"></menu>    
  <slide data-source="imglist" select="selectitem"></slide>
</div>

Роль контрола прежде всего в обепечение данными. Слайдер и меню независимы, и могут распространятся как jQuery
плагины, независимо друг от друга.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
	$(function(){    	

	    //================== плагин слайдера ===================//
	    $('slide').each(function(){
		  var me= $(this),
		      ds=me.attr('data-source'),
		      selItem=me.attr('select'),
			  scope=me.parent('.controller');
	
		  //применим шаблон
	      me.append('<ul class="Slideshow"></ul>');            	  
	
		  //слушаем изменения в data-source
		  scope.on('change-'+ds, function(){		  
			  $('li',me).remove();

		      scope.data(ds).forEach(function(img){
			  	$('ul',me).append('<img src="'+img+'" class="Slideshow_slide">');
			  })
		  })		

		  //слушаем изменения в selectItem
		  scope.on('change-'+selItem,function(){
			  me.find('img').removeClass('Slideshow_slide').addClass('Slideshow_slide_hide');	
			  me.find('img:eq('+scope.data(selItem) +')').removeClass('Slideshow_slide_hide').addClass('Slideshow_slide');		
		  })
  		
	    });   

	    //================== плагин меню ===================//

	    $('menu').each(function(){
		  var me= $(this),
		      ds=me.attr('data-source'),
		      selItem=me.attr('select'),
			  scope=me.parent('.controller');
	
		  //применим шаблон
	      me.append('<ul></ul>');            	  

		  //слушаем изменения в data-source 	
		  scope.on('change-'+ds,function(e){		  
		      scope.data(ds).forEach(function(img){
			  	$('ul',me).append('<li>'+img+'</li>');
			  })

			  me.find('li').click(function(e){
				scope.data(selItem, $(this).index() );
				scope.trigger('change-'+selItem);
			  })			  		
		  })
		  
	    });  
    

	    //================== контроллер ===================//

		$('#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>

<style>
    .Slideshow {
      position    : relative;
      width       : 600px;
      height      : 400px;
      list-style  : none;
      padding     : 0;
      overflow    : hidden;
    }

    .Slideshow_slide_hide{
      position   : absolute;
      width      : 0%;
      left       : 50%;
      height     : 100%;
      transition : all 0.2s;
	}

    .Slideshow_slide {
      position   : absolute;
      width      : 100%;
      height     : 100%;
      transition : all 0.2s 0.2s;
    }

    li:hover {
      background-color : red;
      cursor           : pointer;
    }
</style>

<div id="contr1" class="controller">
  <menu data-source="imglist" select="selectitem"></menu>    
  <slide data-source="imglist" select="selectitem"></slide>
</div>

[iKillMaxmaxmaximus]

Ну окей, теперь сделай так чтобы при клике колесиком мышки по активному слайду он и его пункт меню удалялся) ^__^

это то что у меня делается вот так

$('slide').on('click(m-middle)', function(event, index){
  $('slide').splice(index, 1);
});

кстати надо обертку на удалялку написать) точно)


п.с. и теперь посмотри на мои 15 строчек кода и на свои, а так же я не понял что ты хочешь доказать, ты хочешь показать свое незнание зачем нужны шаблонизаторы или что)? Если ты не знаешь зачем они нужны я могу быстренько по задавать тебе квесты от которых у тебя руки дыбом встанут) которые на шаблонизаторах решаются за 5 секунд) если уж тебе лень смотреть пособия по ангуляру)

ок ок небольшое соревнование, давай напишем простое TODO приложение))

щас я опишу цель задания

[DjDiablo]

Причём тут шаблонизаторы, или размер кода.
Я не это пытаюсь донести. Я не полный псих чтобы 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 уже пинал тебя за это

[iKillMaxmaxmaximus]

Ты видимо просто не до конца понимаешь ЧТО такое UI.js и как им пользоваться)

Разница в том что я создал чёрный ящик.
с точки зрения пользователя компонента приложение выглядит так,

а у меня вот так:

<ul ui-template="Slideshow">
<img ui="Slideshow-slide" src="{{src}}" class="slide_{{position}}">
</ul>

Я не хочу писать вот такую парашу когда мне нужен слайдер.

Эм, ты будешь писать эту парашу только когда будешь создавать слайдер, когда же ты захочешь его нарисовать ты будешь писать просто название этой параши)

DjDiablo, то о чем ты говоришь называется шаблоны) ты пытался применить редактор модулей в шаблонизации по этому и предположил что это придется писать каждый раз) вот и все)

видимо мне действительно надо сделать демки нормальные на сайте чтобы показать что да как) а то вы не понимаете) ну это и логично вы же не знаете что в коде, вы видите только то что я показал)

[DjDiablo]

Может и не понимаем, я прошу эту демку от тебя с первой версии

[iKillMaxmaxmaximus]

Ну вот смотри короче, ты оцениваешь то что есть, но дело в том что я пилю все с нижних уровней так чтобы удобно было не только юзать модули, но и описывать их и.т.п. то есть на самом верхнем уровне у тебя стена и взаимодействие между кирпичиками строится так:



у меня же верхние кирпичики это модули и используются они так:



да да, на это место автоматически подставятся разметка из шаблонов этих модулей ))

2 (зарание описаных с зарание опсиаными шаблонами) модуля, и связаны они по всем сокетам (хотя что у менюшки что у слайдшоу по сути юзается только один сокет toggle перкключалка, если не написать название сокетов после айдишника модуля на который подписываемся то подписывание происходит на все сокеты которые у него вообще есть)

Ну как-то так, просто это версия 0.7 и тут я просто придумываю как красиво описывать логику модулей и их шаблоны. все ж по порядку ну)


и разумеется я добавлю параметры тут) чтобы легко описывать настройки каждого модуля

пока мы просто видим что модуль Слайд шоу подписан на все сокета модуля с айдишником myMenu =) и реагирует на них, меню о слайдшоу ничего не знает потому что сокеты могут только "слушать" но не передавать)

[DjDiablo]

а инфа c путями к картинкам где ?

[iKillMaxmaxmaximus]

а инфа c путями к картинкам где ?

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

но можно добавить чо то типа контролов как у тебя и передавать их имена в настройки, ну тип того



<ui src="urlLust">Shideshow{ #myMenu }</ui>
<ui src="urlLust">Menu#myMenu</ui>

но блин мне кажется данные надо как то на сервере хранить и аяксом получать, не?

у меня щас это делается так

описывается api для работы с сервером:

ui.api = function(){ 

  this.getComments = function (){};
  this.getImgURLs = function (){};

}

а внутри модуля просто юзается этот метод

ui.module["Slideshow"] = function($){

   $.api.getImgURLs(function(urls){
      $('slide').repeat(urls)
   })

};

ну типа того

[DjDiablo]

Если сайт, то нужно помнить что аякс враг поисковика.

Если приложение то вероятнее всего ajax с сервера.
Но нужно биндить данные очень аккуратно, возможно данные не только слайдером используются.
К тому же данные могут редактировать на клиенте, удалятся, добавляться, и возможно сохранятся обратно на сервер.

[iKillMaxmaxmaximus]

Если сайт, то нужно помнить что аякс враг поисковика.

с подключением ага, https://support.google.com/webmaster...r/174992?hl=ru

Но и это не всё данные могут редактировать на клиенте, удалятся, добавлятся, и возможно сохранятся обратно на сервер.

немного не понял в чем тут проблема?, а хотя понял, спасибо за наводку)



п.с. а знаешь сделаю ка я уровень стены уже сейчас) чтобы показать как это удобно

У тебя все кишки на виду

это потому что я кишки и показываю) чтобы показать какие они охуенные и аккуратные и легко описываются.
так то ^__^