使用Ember.js進行手動表單數據保存的正確方法是什麼？

我想在Ember.js（不使用活動綁定）中創建一個具有中等數量的字段（比如說20）的手動保存的表單，到目前爲止我對這樣做的正確方式/最佳實踐感到困惑。我發現下面的方法：使用Ember.js進行手動表單數據保存的正確方法是什麼？

所有上述方法似乎哈克在一定程度上;他們要麼擴展文本字段，要麼使用每個字段的觀察者，要求你列出每個字段。有沒有其他的方法？像'unbound'助手，但允許自動模型更新魔術/驗證（通過ember-data）在某些動作上（像'unbound-until'或'conditional-bind'之類的東西）？我已經瀏覽了所有的文檔，所以，github問題，Ember論壇，以及上面的鏈接，仍然覺得我一定錯過了一些東西。

基本上，一種說法是：「盡你所能地用一般綁定的形式/字段來做，但只能在某個動作上，而不是在實時上。」

來源

2014-02-15 J B

你想要的是一個「緩衝代理」，在這裏你臨時存儲代理對象的所有模型修改（你可以使用setUnkownProperty）。一旦您對更改感到滿意，您可以將所有代理數據複製到實際對象中（「刷新數據」）。

App.Heisenberg = { 
    firstName: 'Walter', 
    lastName: 'White', 
}; 

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return App.Heisenberg; 
    }, 
    setupController: function(controller, model) { 
    controller.set('content', model); 
    } 
}); 

App.IndexController = Ember.ObjectController.extend({ 
    proxy: {}, 
    setUnknownProperty: function(key, value) { 
    console.log("Set the unknown property: " + key + " to: " + value); 
    this.proxy[key] = value; 
    console.log(this.proxy); 
    }, 
    flush: function() { 
    for(var key in this.proxy) 
     this.set('model.'+key, this.proxy[key]); 
    } 
});

模板：

<script type="text/x-handlebars" data-template-name="index"> 
    Saved Name: {{firstName}} {{lastName}}<br /> 
    <br /> 

    <form {{ action "saveEdit" on="submit" }}> 
     First Name: {{input type="text" valueBinding="firstName"}}<br /> 
     Last Name: {{input type="text" valueBinding="lastName"}}<br /> 
     <br /> 
     <button {{ action "flush" }}>Flush</button> 
    </form> 
</script>

這將使一個不錯的控制器的Mixin。

查看this jsBin查看實時示例。

來源

2014-02-15 08:14:37 chopper

根據Ember開發者的說法，這種模式現在肯定是正確的答案，但是添加設備可以更容易地完成這些工作，這些都在路線圖上：https：//github.com/emberjs/data/issues/1600 –

我發現了一個解決辦法，但我不是100％滿意的：

在我的「編輯」模板，我有：

<form {{ action "saveEdit" on="submit" }}> 
    Title: {{input type="text" value=title}} 
    <input type="submit" value="Save"> 
    <button {{ action "cancelEdit" }}>Cancel</button> 
</form>

在我相關的控制器

然後，我做的：

cancelEdit: function() { 

    var entry = this.get('model'); 

    this.set('isEditing', false); 
    entry.rollback(); 

}, 

saveEdit: function() { 

    var entry = this.get('model'); 

    this.set('isEditing', false); 
    entry.save().then(

    function() { 

    console.log('Saved!'); 

    }

我只是隱藏「實時更新」顯示的字段。我仍然想找到一種方法暫時關閉綁定，直到我觸發我的「saveEdit」動作，因爲這仍然不雅觀。

來源

2014-02-15 05:56:58

使用Ember.js進行手動表單數據保存的正確方法是什麼？

回答

相關問題