在Ember.JS中保存表格數據 - 使用版本2.3

有這個帖子：「What's the right way of doing manual form data saving with Ember.js?」，但是，我對如何用Ember 2.3做到這一點感到不知所措。在Ember.JS中保存表格數據 - 使用版本2.3

在accepted answer這個問題，我們有這樣的片段：

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]); 
    } 
});

然而，我沒有一個「ObjectController」在我的項目。運行

ember generate controller test

給我的東西，上面寫着Ember.Controller.extend({ ... });，而不是ObjectController。搜索2.3 API，我根本找不到ObjectController。

將代碼片段插入Ember.Controller.extend中，我的各種操作方法放置在這裏似乎沒有辦法。整個模型消失（無數據），添加數據也不起作用。沒有任何反應，沒有錯誤，沒有任何反應這些方法可能根本就沒有被調用。

任何意見「轉換」到2.3將不勝感激。

現在我有

export default Ember.Controller.extend({ 
proxy: {}, 
    actions: { 
    setUnknownProperty: function(key, value) { 
       console.log("Set the unknown property: " + key + " to: " + value); 
       this.proxy[key] = value; 
       console.log("Proxy: "); 
       console.log(this.proxy); 
      }, 
      testAction: function() { 
       console.log("fired"); 
      }, flush: function() { 
        console.log("Flush called"); 
         for(var key in this.proxy) { 
         console.log("Flushing " + key); 
         this.set('model.'+key, this.proxy[key]); 
         console.log("Saving"); 
         this.get('model.'+key).save(); 
        } 
      } 
}

來源

2016-02-29 Christian Neverdal

要回答這個問題，我創建了一個可以在這裏查看一個簡單的例子應用：我創建了一個路徑標識路線

https://github.com/tyronepost/EmberFormExample

和用戶模型使用以下命令：

ember g route index -p // -p short for --pod, groups .js and .hbs file into the same dir 
ember g model user

ind EX/template.hbs：

<div>first name: {{input value=firstName}}</div> 
<div>last name: {{input value=lastName}}</div> 
<div>email: {{input value =email}}</div> 
<button {{action 'submit'}}>submit</button>

指數/ route.js：

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    actions: { 
    submit: function() { 
     var user = this.store.createRecord('user', { 
     firstName: this.controller.get('firstName'), 
     lastName: this.controller.get('lastName'), 
     email: this.controller.get('email') 
     }); 
     user.save().then(() => { 
     console.log('save successful'); 
     this.controller.set('firstName', null); 
     this.controller.set('lastName', null); 
     this.controller.set('email', null); 
     }, function() { 
     console.log('save failed'); 
     }); 
    } 
    } 
});

user.js的：

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    firstName: DS.attr('string'), 
    lastName: DS.attr('string'), 
    email: DS.attr('string') 
});

我還創建了一個休息適配器和指定的命名空間「API '：

ember g adapter application

application.js

import DS from 'ember-data'; 

export default DS.RESTAdapter.extend({ 
    namespace: 'api' 
});

當「燼服務器」被稱爲

ember g http-mock users

這裏要注意的重要一點是開機時，我們使用的是默認的控制器中的HTTP的模擬對象，該路由映射，所以沒有必要明確地創建一個。在這種情況下，我們用它來維護輸入字段的狀態，直到我們點擊提交。

在我們的提交函數中，我們調用了user.save（）。then（...），它將參數作爲成功回調和失敗回調。一個執行取決於服務器如何響應。

以下書籍是關於如何處理餘燼2的細微差別的信息的一個很好的來源。x

https://pragprog.com/book/mwjsember/deliver-audacious-web-apps-with-ember-2

來源

2016-02-29 15:33:04

在Ember.JS中保存表格數據 - 使用版本2.3

回答

相關問題