Question

在我的ember应用程序中，我有一个文件输入DOM元素。我将元素的value属性绑定到controller属性。

我这样做是为了知道文件输入的值何时发生变化。但我不想设置控制器的值。我的意思是单向绑定。 DOM元素到控制器而不是DOM元素的控制器。

车把代码：

{{input type="file" name="pic" accept="image/*;capture=camera" id="newImage" value= imagePath}}

控制器：

App.ExampleController = Ember.ObjectController.extend({
    imagePath: null,
    imageChanged: function () {
        //Some Code
    }.observes('imagePath')
});

我需要这个，因为我收到以下错误

未捕获的InvalidStateError：无法设置＆＃39;值＆＃39;财产＆＃39; HTMLInputElement＆＃39;：此输入元素接受可能的文件名只能以编程方式设置为空字符串。扔了的jquery-1.11.1.min.js

有没有办法解决这个问题？

Answer 1

文件输入元素没有value属性，您需要绑定到输入上的更改事件，然后访问files属性。

请参阅此答案，了解可能对您有用的实施Ember.js: Upload file component

Answer 2

使用控制器

您可以使用观察者进行单向绑定，您将在其中手动设置值。

App.ExampleController = Ember.ObjectController.extend({
    imagePath: null,
    imagePathValue: null,

    _imageChanged: function () {
        this.set('imagePath', this.get('imagePathValue'));
    }.observes('imagePathValue')
});

与

{{input type="file" name="pic" accept="image/*;capture=camera" id="newImage" value=imagePathValue}}

使用视图

App.ExampleView = Ember.View.extend({
   _imageChanged: function () {
       this.$().find('#imageFile').on('keypress paste', function() {
           this.set('controller.imagePath', this.value);
       }.bind(this));
   }.on('didInsertElement')
});

与

{{input type="file" name="pic" accept="image/*;capture=camera" id="newImage" id="imageFile"}}

使用Ember.Binding.oneWay

您可以使用的一个特别有用的绑定自定义是 oneWay（）助手。这个助手告诉Ember你只对此感兴趣接收对您绑定的对象的更改。

App.ExampleController = Ember.ObjectController.extend({
    imagePath: Ember.Binding.oneWay("imagePathValue"),
    imagePathValue: null,
});

{{input type="file" name="pic" accept="image/*;capture=camera" id="newImage" value=imagePathValue}}

从DOM元素到Controller属性的一种绑定方式 - Ember

2 个答案:

使用控制器

使用视图

使用Ember.Binding.oneWay