Question

我需要在组件中使用HTML输入并且需要绑定值。输入助手在某些移动设备上使用时会导致各种错误，因此无法使用。

在 Ember 1.13 或更高版本中工作的输入。

class func faceForPerson (_ person:String, size:CGSize, completion:@escaping (_ image:UIImage?, _ imageFound:Bool?)->()) throws { let escapedString = person.addingPercentEncoding(withAllowedCharacters: CharacterSet.urlHostAllowed) let pixelsForAPIRequest = Int(max(size.width, size.height)) * 2 let url = URL(string: "https://en.wikipedia.org/w/api.php?action=query&titles=\(escapedString!)&prop=pageimages&format=json&pithumbsize=\(pixelsForAPIRequest)") var request = URLRequest(url:url! as URL); request.httpMethod = "GET"; guard let task = URLSession.shared.dataTask(with: request, completionHandler: {(data:Data?, response:URLResponse?, error:NSError?) -> Void in if error == nil { let wikiDict = try! JSONSerialization.jsonObject(with: data!, options: JSONSerialization.ReadingOptions.allowFragments) as! NSDictionary if let query = wikiDict.object(forKey: "query") as? NSDictionary { if let pages = query.object(forKey: "pages") as? NSDictionary { if let pageContent = pages.allValues.first as? NSDictionary { if let thumbnail = pageContent.object(forKey: "thumbnail") as? NSDictionary { if let thumbURL = thumbnail.object(forKey: "source") as? String { let faceImage = UIImage(data: try! Data(contentsOf: URL(string: thumbURL)!)) completion(faceImage, true) } }else{ completion(nil, false) } } } } } } as! (Data?, URLResponse?, Error?) -> Void)else{ throw WikiFaceError.couldNotDownloadImage } task!.resume() }

component/name-input.hbs

<input type="text" value={{name}} onChange={{action 'nameDidChange' value='target.value'}}>

component/name-input.js

如何在 Ember 1.12 中使用HTML输入并仍保留其功能？

我试过这样的事情，但输入值没有传递给组件的动作：

export default Ember.Component.extend({ name: 'Jim', actions: { nameDidChange: function(value) { this.set('name', value); } } });

component/name-input.hbs

<input type="text" value={{name}} {{action 'nameDidChange' value='target.value' on='change'}}>

component/name-input.js

这是两个Twiddles，一个在1.13中按预期工作，一个在1.12中不起作用。

Twiddle - 1.13

Twiddle - 1.12

Answer 1

据我所知，你不能在Ember 1.13之前设置动作助手的值（如果我错了，我真的很乐意收到通知）。因此，您的旋转不适用于版本1.12，我不知道如何解决它。

我建议的是一种解决方案;我不太喜欢。我发布它作为答案，因为它可能就是适合你的解决方案。请参阅我通过修改您创建的twiddle。我只是使用jquery来提取html输入的值并将其设置为name2组件的name-input字段。希望这对你有用。

Answer 2

在Ember 1.12.2中，您的操作中可以使用事件对象，您可以使用该对象获取名称输入的值：

actions: {
  nameDidChange() {
    const value = event.target.value; // <--
    this.set('name', value);
  },
},

我创建了一个Ember Twiddle example来演示。

绑定Ember v1.12组件中的HTML输入值

2 个答案: