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

【问题标题】：One way binding from DOM element to Controller property - Ember从 DOM 元素绑定到 Controller 属性的一种方式 - Ember
【发布时间】：2015-04-30 22:13:48
【问题描述】：

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

我这样做是为了知道文件输入的值何时发生变化。但我不想从控制器设置值。我的意思是单向绑定。 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：无法将“值”属性设置为 'HTMLInputElement'：这个输入元素接受一个文件名，它可以只能以编程方式设置为空字符串。被扔 jquery-1.11.1.min.js

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

【问题讨论】：

标签： javascript jquery dom ember.js

【解决方案1】：

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

请参阅此答案以获取可能对您有所帮助的实现Ember.js: Upload file component

【讨论】：

【解决方案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}}

【讨论】：

感谢您的解释。我可以看到这是如何在 ember 中演示一种方式绑定的。但我想说的是另一件事。也就是说，DOM 元素的变化应该反映在控制器的属性中，反之亦然。