Tweet
Hallo zusammen,
ich bin heute das erste mal hier und bin bereits begeistet vom Niveau der Diskussionen, ich werd sicher öfter dieses Forum besuchen.
Nun zu meiner Frage bzw. der Diskussion, die ich auslösen möchte.
Ich habe schon einmal ein ähnliches Posting in einen anderem Forum erstellt, aber leider konnte mir nicht weiter geholfen werden bzw. es kam keine Antwort. Ich habe vor das MVC- Design Pattern mit dojo umzusetzen (Info MVC: Model View Controller - Wikipedia, Info dojo/ MVC: Model-View-Controller (MVC) with JavaScript | Alex @ Net).
Ich möchte dojo 0.9 verwenden. Soweit so gut, ich habe mir das oben genannte Bsp. zur Umsetzung von MVC mit dojo angesehen und mir ist die Vorgehensweise dabei auch klar. Was mir nicht klar ist, wo der Ajax- Request stattfinden muss, im Controller oder im Model? Wahrscheinlich gehen beide Wege. Aber ich weiß nicht wie die Implementierung genau aussehen soll. Ich hab bereits rumprobiert, aber es will noch nciht so klappen. Hat jmd. von euch schon mal so etwas in der Richtung gemacht? Evtl. best practise Vorschläge?
Es handelt sich hierbei um ein Proof of Concept und deswegen habe ich den Quellcodes der oben angegeben Quelle nur modifieziert:
Controller.js
Model.js:
View.js:
index.html:
Dieser Quellcode enthält noch keinen Ajax- Request. Wo würdet ihr ihn platzieren?
Vielen Dank für eure Hilfe und viele Grüße
masiru
ich bin heute das erste mal hier und bin bereits begeistet vom Niveau der Diskussionen, ich werd sicher öfter dieses Forum besuchen.
Nun zu meiner Frage bzw. der Diskussion, die ich auslösen möchte.
Ich habe schon einmal ein ähnliches Posting in einen anderem Forum erstellt, aber leider konnte mir nicht weiter geholfen werden bzw. es kam keine Antwort. Ich habe vor das MVC- Design Pattern mit dojo umzusetzen (Info MVC: Model View Controller - Wikipedia, Info dojo/ MVC: Model-View-Controller (MVC) with JavaScript | Alex @ Net).
Ich möchte dojo 0.9 verwenden. Soweit so gut, ich habe mir das oben genannte Bsp. zur Umsetzung von MVC mit dojo angesehen und mir ist die Vorgehensweise dabei auch klar. Was mir nicht klar ist, wo der Ajax- Request stattfinden muss, im Controller oder im Model? Wahrscheinlich gehen beide Wege. Aber ich weiß nicht wie die Implementierung genau aussehen soll. Ich hab bereits rumprobiert, aber es will noch nciht so klappen. Hat jmd. von euch schon mal so etwas in der Richtung gemacht? Evtl. best practise Vorschläge?
Es handelt sich hierbei um ein Proof of Concept und deswegen habe ich den Quellcodes der oben angegeben Quelle nur modifieziert:
Controller.js
PHP Code:
dojo.declare('Controller', null, {
constructor : function (model) {
this.oModel = model;
},
addItem : function () {
var item = prompt('Add item:', '');
if (item) {
this.oModel.addItem(item);
}
},
delItem : function () {
this.oModel.removeSelectedItem();
},
updateSelected : function (e) {
this.oModel.setSelected(e.target.selectedIndex);
}
});
PHP Code:
dojo.declare('Model', null, {
constructor : function () {
this._items = new Array('Data 1','Data 2');
this._selected = -1;
},
getItems : function () {
return [].concat(this._items);
},
addItem : function (item) {
this._items.push(item);
},
removeItemAt : function (index) {
this._items.splice(index, 1);
},
removeSelectedItem : function () {
if (-1 != this._selected) {
this._items.splice(this._selected, 1);
}
},
setSelected : function (index) {
this._selected = index;
}
});
PHP Code:
dojo.declare('View', null, {
constructor : function (model, controller) {
this.oModel = model;
this.oController = controller;
this.elements = {
'list' : dojo.byId('list'),
'addButton' : dojo.byId('plusBtn'),
'delButton' : dojo.byId('minusBtn')
};
dojo.connect(this.oModel, 'addItem', this, 'rebuildList');
dojo.connect(this.oModel, 'removeSelectedItem', this, 'rebuildList');
dojo.connect(this.elements.list, 'onchange', this.oController, 'updateSelected');
},
show : function () {
this.rebuildList();
var e = this.elements;
dojo.connect(e.addButton, 'onclick', this.oController, 'addItem');
dojo.connect(e.delButton, 'onclick', this.oController, 'delItem');
},
rebuildList : function () {
var list = this.elements.list;
while (list.lastChild) {
list.removeChild(list.lastChild);
}
var items = this.oModel.getItems();
for (var key in items) {
list.appendChild(document.createElement('option')).appendChild(document.createTextNode(items[key]));
}
this.oModel.setSelected(-1);
}
});
PHP Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="../lib/dojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="../lib/MVC/Controller/Controller.js"></script>
<script type="text/javascript" src="../lib/MVC/Model/Model.js"></script>
<script type="text/javascript" src="../lib/MVC/View/View.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function () {
var model = new Model();
var controller = new Controller(model);
var view = new View(model, controller);
view.show();
});
</script>
</head>
<body>
<select id="list" size="10" style="width: 15em"></select>
<br />
<br />
<button id="plusBtn"> Hinzufügen </button>
<button id="minusBtn"> Löschen </button>
</body>
</html>
Vielen Dank für eure Hilfe und viele Grüße
masiru