模板vs DOM創建 - 高度動態的接口

構建一個瀏覽器遊戲我從PHP到JavaScript，現在我也想在服務器端使用它。因爲我要求用戶使用JavaScript，所以我會廣泛使用它。我想以面向對象的方式使用它。模板vs DOM創建 - 高度動態的接口

考慮到MVC，模型將用於客戶端和服務器端。視圖僅用於客戶端。界面分爲多個部分：主菜單，主內容和一些小部件。我將以我已經完成的部分爲例：菜單分爲三個類別，包含多個條目。每個條目都是一個帶有附加操作的鏈接（如切換內容）。

// menuview: 
var self = new View(); 
var generalMenu = new MenuCategory('generalmenu') 
    .addEntry(new MenuEntry('overview', new Action())) 
.addEntry(new MenuEntry('buildings')) 
    .addEntry(new MenuEntry('resources')) 
// [..more categories..] 
self.toData = function() { 
    return { 
     id: this.id, 
     cat: [generalMenu.toData(), infosMenu.toData(), userMenu.toData()] 
    }; 
};

目前View是一個toData（）方法來創建模板解析器（自制，簡單但支持迭代）數據的compositum。創建後，這些操作就會被附加。我使用jQuery作爲框架：

self.show = function(callback) { 
    $tpl(this.tpl).parse(this.toData()).lang('main').toHTML(function(html) { 
     var el = $(html); 
     el.find('a').click(function (e) { 
      MenuEntry.actionHandler.execAction(e.target.id); 
      return false; 
     }); 
     el.appendTo('#'+self.target); 
     callback && callback(); 
    }); 
    return this; 
};

我已經聲明瞭一個actionhandler來避免遍歷鏈接。

我對這個解決方案感覺不太好，它不夠靈活。我想將視圖看作一個真實的組合，而不是有很多奇怪的依賴關係。另外，如果我改變了一部分，我必須重新整個View。那麼，在這個例子中，這並不明顯，因爲菜單在運行時不會改變，但界面的其他部分將會改變。

現在，終於到了我的問題：有沒有更好的解決方案？像dom引用遍佈視圖，每個menuentry都有自己的引用和直接附加的動作？如果我不再使用模板，我會失去什麼樣的靈活性？

來源

2010-01-30 Phoscur

我決定去模板解析器。每個視圖都存儲它的節點，並且如果它被通知更新數據，它可以直接操作它。

來源

2010-02-01 16:38:00 Phoscur

模板vs DOM創建 - 高度動態的接口

回答

相關問題