javascript - 从组件内部设置 Controller 属性

Question

我在让它发挥作用时遇到了一些麻烦。我有一个图像上传组件，我想用它设置一个 Controller 属性，以便稍后我可以在裁剪组件中使用它，该组件最终将设置一个保存到后端的属性。

在index.hbs中我渲染图像输入组件，在image-component.hbs中我有这个设置

{{#if controller.image}}
<img src="{{controller.image}}" width="300">
<br>
{{/if}}
{{ file-input fileChanged="fileSelectionChanged"}}

在 file-input.js 中我有这个

import Ember from 'ember';

export default Ember.TextField.extend({
    type: 'file',
    change: function(e) {
        let self = this;
        var inputFiles = e.target.files;
        if (inputFiles.length < 1) {
            return;
        }

        let inputFile = inputFiles[0];

        let fileInfo = {
            name: inputFile.name,
            type: inputFile.type || 'n/a',
            size: inputFile.size,
            date: inputFile.lastModifiedDate ?
                        inputFile.lastModifiedDate.toLocaleDateString() : 'n/a',
        };

        var fileReader = new FileReader();

        fileReader.onload = function(e) {
            let fileReader = e.target;
            fileInfo.dataUrl = fileReader.result;

            self.sendAction('fileChanged', fileInfo);
        };

        let firstFile = e.target.files[0];
        fileReader.readAsDataURL(firstFile);
    }
});

在 image-input.js 中我有这个

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        fileSelectionChanged: function(file) {
            this.set('controller.image',file.dataUrl);
        },
    },
});

最后在 Controller 中我将其设置如下。

import Ember from 'ember';

export default Ember.Controller.extend({
    formValid: false,
    image: '',
    actions: {
        createFlyer: function() {
            var newFlyer = this.store.createRecord('flyer', {
                firstName: this.get('firstName'),
              lastName: this.get('lastName'),
              location: this.get('location'),
              jobTitle: this.get('jobTitle'),
              companyName: this.get('companyName'),
              timeSpent: this.get('timeSpent'),
              blurb: this.get('blurb'),
              image: this.get('image')
            });
            newFlyer.save();
            this.setProperties({
                firstName: '',
              lastName: '',
              location: '',
              jobTitle: '',
              companyName: '',
              timeSpent: '',
              blurb: '',
            })
        }
    }
});

这是模型

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  location: DS.attr('string'),
  jobTitle: DS.attr('string'),
  companyName: DS.attr('string'),
  timeSpent: DS.attr('string'),
  blurb: DS.attr('string'),
  image: DS.attr('string')
});

当前组件正在 Controller 上设置文件属性，因为当您浏览并添加图像时，图像标签会显示 data: url 已正确添加到 src 属性中，因此正在设置该属性，但是当我保存时image 属性的内容没有作为 data: url 的内容传递，它只是空白，就像看到默认值一样。

我是否没有正确设置属性？

供引用

我正在使用 Ember-cli 版本 0.2.7

更新

应用下面 Kingpin 的建议后，当我尝试保存到后端时，我现在在控制台中收到此错误。

TypeError: Cannot read property 'match' of null
    at <anonymous>:873:35
    at Array.exports.default.mixin.Mixin.create.find (ember.debug.js:28104)
    at <anonymous>:872:33
    at tryCatch (ember.debug.js:45439)
    at invokeCallback (ember.debug.js:45451)
    at publish (ember.debug.js:45422)
    at ember.debug.js:26472
    at Queue.invoke (ember.debug.js:878)
    at Object.Queue.flush (ember.debug.js:943)
    at Object.DeferredActionQueues.flush (ember.debug.js:748)

Answer 1

摆脱 Controller 引用，只需将其设置在组件上，无论如何，它都在 View 范围内。

模板

{{#if image}}
  <img src="{{image}}" width="300">
  <br>
{{/if}}
{{ file-input fileChanged="fileSelectionChanged"}}

JS

export default Ember.Component.extend({
    actions: {
        fileSelectionChanged: function(file) {
            this.set('image',file.dataUrl);
        },
    },
});