Что-то вроде MVC...
Работаю над плагином, хочу полностью отделить "представление" от "модели"
К плагину поступают необходимые данные DOM в виде объекта. Происходит инициализация. После взаимодействия пользователя с приложением - плагин меняет в имеющихся данных значения При некоторых сценариях работы плагина должны появляться popup-сообщения.. Например, сообщение "Ваши данные отправлены на сервер" или "В корзине 5 товаров" и т.д. Как лучше делать эти сообщения: 1. В плагине с помощью createElement - но тогда это будет уже влияние на структуру DOM! 2. Сделать в html несколько окон с display:none. При необходимости вносить изменения в них и отображать на клиенте - но это будет будет уже костыль, и программист, использующий плагин должен будет дописывать его к разметке 3. Сделать отдельных скрипт для создания этих сообщений? 4 .... Вот живой пример: http://demo.hnoe.ru/7.html При клике на цифру с товарами в корзине - должна отображаться информация о товарах, или при клике оформить заказ - окошко с данными. Как это грамотно реализовать? |
Даю подсказку триггеры и data binding!
|
не уверен что правильно понял что ты хочешь.
пример отделения данных
<!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>
|
| Часовой пояс GMT +3, время: 10:09. |