Форум

dmitry111 · #1 (**permalink**) 15.02.2013, 13:06

Работаю над плагином, хочу полностью отделить "представление" от "модели"

К плагину поступают необходимые данные DOM в виде объекта.
Происходит инициализация.

После взаимодействия пользователя с приложением - плагин меняет в имеющихся данных значения

При некоторых сценариях работы плагина должны появляться popup-сообщения.. Например, сообщение "Ваши данные отправлены на сервер" или "В корзине 5 товаров" и т.д.

Как лучше делать эти сообщения:

1. В плагине с помощью createElement - но тогда это будет уже влияние на структуру DOM!

2. Сделать в html несколько окон с display:none. При необходимости вносить изменения в них и отображать на клиенте - но это будет будет уже костыль, и программист, использующий плагин должен будет дописывать его к разметке

3. Сделать отдельных скрипт для создания этих сообщений?

4 ....

Вот живой пример: http://demo.hnoe.ru/7.html
При клике на цифру с товарами в корзине - должна отображаться информация о товарах, или при клике оформить заказ - окошко с данными. Как это грамотно реализовать?

monolithed · #2 (**permalink**) 15.02.2013, 15:00

Даю подсказку триггеры и data binding!

DjDiablo · #3 (**permalink**) 15.02.2013, 21:36

не уверен что правильно понял что ты хочешь.
пример отделения данных

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <button id="add"> добавить товар </button>
    <div id="cart"> </div>
    <script>
 	    store=function(){
        	this.data=[];
        	this.event={};    
        };
      
		store.prototype={
          
          fire:function(name,options){
              for (item in this.event[name]) this.event[name][item](options);
          }, 
            
          on:function(name,fun){
			  if (typeof this.event[name]=="undefined") this.event[name]=[];
              this.event[name].push(fun);	
          },
            
          add:function(data){
              this.data.push(data);          
              this.fire('change');	
          },
            
          get:function(){
              //бла бла
          },
            
          each:function(fun){
              var data=this.data,
                  i=0,
                  len=this.data.length;
              for(;i<len;i++){
                  fun(data[i],i,this)
              }          
          }            
		}	
        
        
        //контролёр
        function test(){
          // заполняем данными
			var m=new store(),
                el=document.getElementById('add'),
                cart=document.getElementById('cart');
          
            el.addEventListener('click',function(){
          		m.add({price:100,name:"хреновина"});
            });                            
        
          
          
			m.on('change',function(){
              var sum=0,text="";
              
              m.each(function(e){             	
                sum+=e.price;            
                text+=e.name+" за "+ e.price+"$<br/>";
              })          
                                          
              if (sum>500) text=text+"вы золотой покупатель"
              else if (sum>300) text=text+"вы серебрянный покупатель";
              cart.innerHTML=text;
          	})           
        };
      
        test();

      
    </script>

  </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript