Ember.js文件上傳以更改路線模型

Question

我讓Ember顯示事情清單。

我希望用戶上傳文件，然后將內容列表更改為該文件中的內容。

HTML

  <script type="text/x-handlebars" id="index">
    <h2>List of things</h2>
    <ul>
      {{#each item in model}}
        <li>{{item}}</li>
      {{/each}}
    </ul>
    Change List of Things:
    {{#view Ember.View}}
      {{view App.FileUp}}
    {{/view}}
  </script>

使用Javascript

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.ApplicationController = Ember.Controller.extend({
    actions: {
        file_upload: function(data) {
            alert("I want to change the model to: " + data);
        }
    }
});

App.FileUp= Ember.TextField.extend({
    type: 'file',

    change: function(evt) {
        var input = evt.target;
        if (input.files && input.files[0]) {
            var that = this;

            var reader = new FileReader();
            reader.onload = function(e) {
                var data = e.target.result;
                var c = App.ApplicationController.create();
                c.send('file_upload', data);
            }
            reader.readAsText(input.files[0]);
        }
    },
});

在發出警報的那一行，我可以訪問上載文件中的文本，並且我在應用程序控制器中。 如何更改模型，以便頁面列表反映文本文件中的內容？

JS小提琴： http ： //jsfiddle.net/LJx9t/

如果此代碼不是慣用的Ember，請隨時進行更正。

Answer 1

作為組件，您應該使用sendAction將操作傳遞出組件。 這允許該組件被多次使用，並且不會將其綁定到上下文。

  {{view App.FileUp uploadComplete='file_upload'}}

  {{view App.FileUp uploadComplete='file_upload2'}}

然后在您的組件內部

 change: function(evt) {
    var input = evt.target,
        self = this;

    if (input.files && input.files[0]) {
        var that = this;

        var reader = new FileReader();
        reader.onload = function(e) {
            var data = e.target.result;
        self.sendAction('uploadComplete', data);
        }
        reader.readAsText(input.files[0]);
    }
},

然后您的操作將發送到控制器，然后進行路由，然后沿路由樹向上移動，直到處理完畢。

創建一個索引控制器來處理它

App.IndexController = Ember.Controller.extend({
    actions: {
        file_upload: function(data) {
            this.set('model', data.split('\n'));
        },
        file_upload2: function(data) {
            alert(data);
        }
    }
});

http://jsfiddle.net/rmCYk/1/

Answer 2

要更改的模型已由IndexRoute創建，因此您需要將其設置為IndexController 。 此外， App.FileUp是一個組件，因此，為了將操作發送到當前活動的控制器（即IndexControler ，需要使用targetObject或parentView get('controller') 。

（相關信息， https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls.js#L81-84和討論https://github.com/emberjs/ ember.js / issues / 3393 ）

因此，假設上傳了帶有csv的文件，則以下代碼可以達到您的要求，

http://jsfiddle.net/9u3Cd/

JS

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.IndexController = Ember.ObjectController.extend({
    actions: {
        file_upload: function(data) {
            alert("I want to change the model to: " + data);
            this.set('model',data.split(","));
        }
    }
});

App.FileUp= Ember.TextField.extend({
    type: 'file',

    change: function(evt) {
        var self = this;
        var input = evt.target;
        if (input.files && input.files[0]) {
            var that = this;

            var reader = new FileReader();
            reader.onload = function(e) {
                var data = e.target.result;
                //self.get('parentView').get('controller').send('file_upload', data);
                self.get('targetObject').send('file_upload', data);
            }
            reader.readAsText(input.files[0]);
        }
    },
});