爲什麼編輯到位形式與顯示版本一起渲染而不是在飛行中渲染？

是否有一個特定的原因，大多數人都實現了就地編輯，如同一個顯示的'顯示'div和一個隱藏的'編輯'div，當有人點擊相關的'編輯'按鈕時，它們會打開和關閉。爲什麼編輯到位形式與顯示版本一起渲染而不是在飛行中渲染？

<div id="title"> 
    <div class="display"> 
    <h1> 
     My Title 
    </h1> 
    </div> 
    <div class="edit"> 
    <input type="text" value="My Title" /> 
    <span class="save_edit_button"></span> 
    <a href="#" class="cancel_edit">Cancel</a> 
    </div> 
</div>

到處都是我看到的，就地編輯就是這樣處理的。當您在服務器端渲染所有視圖並將它們交付給客戶端時，這種方法當然是有意義的。但是，對於純粹的AJAX應用程序和backbone.js等框架，似乎我們可以根據需要隨時渲染就地編輯表單元素，從而使我們的代碼更加乾爽，甚至可以制定工廠方法來確定哪個表單元素渲染。例如

與類「標題」的H1元件由<input type="text" />
與類跨度替換「year_founded」由<input type="number" min="1900" max="2050" />
與類「價格」的跨度代替由輸入替換爲適當掩碼只允許輸入價格。

這種做法是將所有就地編輯表單元素渲染爲服務器端呈現頁面時留下的歷史遺留物嗎？

鑑於我們在客戶端MVC框架（如Backbone.js）方面具有的靈活性和強大功能，是否有必要使用工廠方法創建並插入表單元素時有必要？事情是這樣的：

HTML

<div id="description"> 
    Lorem ipsum dolar set amit... 
</div> 
<span class="edit_button"></span>

Backbone.js的查看

events: { 
    "click .edit_button": "renderEditInPlaceForm", 
}, 

renderEditInPlaceForm: function:(e) { 
    var el = $(e.currentTarget).previous(); 
    var id = el.attr('id'); 
    var value = el.text(); 
    var tagName = el.tagName(); 
    var view = new editInPlaceForm({ 
    id: id, 
    type: tagName, 
    value: value 
    }); 
    $("#id").html(view.render().el) 
},

凡editInPlaceForm是一個工廠，返回基於標記名的相應的編輯就地表單元素類型。這個工廠視圖還控制了它自己的邏輯，用於保存編輯，取消編輯，向服務器發出請求並重新渲染被替換爲.html（）函數的適當原始元素？

在我看來，如果我們使用這種方法，那麼我們也可以渲染基於用戶的編輯權限，像這樣的飛<span class="edit_button"></span>按鈕：

<h1 id="title"> 
    <%= document.get("title") %> 
</h1> 
<% if (user.allowedToEdit(document, title)) { %> 
    <span class="edit_glyph"></span> 
<% } %>

其中用戶模型allowedToEdit函數接受作爲參數的模型和屬性。

來源

2011-02-24 Andrew De Andrade

不知道問題在哪裏。我不知道你提出的任何「最佳」解決方案。兩者對我都好。你提到的唯一的不是沒有的事情是讓JavaScript處理你的應用程序的權限。 JS可以很容易地玩，所以請確保您的後端雙打檢查所有客戶端的變化。 – Julien 2011-02-25 19:41:08

@Julien是的，我們計劃在服務器端檢查一切。客戶端的所有特權處理都是針對可用性和用戶體驗問題。我不想渲染用戶不能使用的頁面上的任何元素。例如如果他們沒有編輯權限，那麼他們應該能夠看到編輯按鈕。我的問題是，爲什麼默認情況下在頁面上顯示「顯示」和「編輯」div，而不是在需要時使用工廠來構建必要的就地編輯表單？ – 2011-02-26 01:59:37

我很想知道，作爲一個正在考慮爲我的應用程序使用Backbone的人......在我看來，你的方式是有道理的，儘管我對「工廠」有點困惑。這是爲了減少「對於這個顯示視圖，渲染這個命名的編輯視圖」，所以你可以說，「這個顯示視圖是單行文本，工廠請給我一個單行編輯視圖」？ – kamranicus 2011-12-13 03:32:22

這是一個有趣的想法。魔鬼在細節中。

雖然您的簡單示例很容易作爲可編輯的表單即時呈現，但在處理其他數據類型時，事情會變得更加棘手。

例如 - 假設我的編輯表單要求用戶從select列表中選擇一個值。在顯示窗體上，我可以簡單地顯示用戶的選擇，但對於編輯窗體，我將需要其他可用選項。我在哪裏隱藏在顯示器上？類似的問題存在於複選框，收音機列表中...

因此，也許我們應該考慮渲染編輯窗體，然後從那裏導出我們的顯示視圖？

來源

2011-12-13 13:58:46 graphicdivine

5個骨幹應用程序後，我來到了相同的想法。

當事情很複雜，你的形式顯示用戶數據，之間的關係，但在簡單的情況下，你只需要input，select，checkbox超過h1，div或span

現在我正在尋找jQuery插件，使簡單的就地編輯，無需Ajax。 jQuery但不是Backbone因爲我不想與Backbone緊密結合在一起，這樣的小事情。

可能懷特我自己的jQuery + Synapse插件http://bruth.github.com/synapse/docs/。

突觸綁定與模型和jQuery輸入放置

來源

2012-04-21 06:44:45

爲什麼編輯到位形式與顯示版本一起渲染而不是在飛行中渲染？

回答

相關問題