如何使用Ember创建数据驱动的文本输入？

I am trying to create several inputs that update my Ember Data model immediately, without a submit action. E.g.

我正在尝试创建几个输入,立即更新我的Ember数据模型,而无需提交操作。例如。

Person
First Name  [Placeholder: Enter first name ]
Last Name   [Placeholder: Enter last name  ]
City        [Placeholder: Enter city       ]

I’ve approached this by creating a wrapper component around an Ember TextField subclass component, and have gotten it to work, kind of, but with two major problems:

我已经通过在Ember TextField子类组件周围创建一个包装器组件来实现这一点,并且已经使它工作,但有两个主要问题:

Placeholders don't work as I tried to implement them (see below) — seems I could do this a lot more easily using the TextSupport mixin, but I don't know how to use it.

占位符不起作用,因为我试图实现它们(见下文) - 似乎我可以使用TextSupport mixin更容易地做到这一点,但我不知道如何使用它。

I don't like the way I am sending change actions up to the route, which is basically like this:

我不喜欢我将更改操作发送到路线的方式,基本上是这样的:

Within a top-level component {{person-view action="modifyPersonInternals"}} I have my wrapper components as follows:

在*组件{{person-view action =“modifyPersonInternals”}}中,我的包装器组件如下:

{{editable-property property="firstName" action="updateFirstName"}}
{{editable-property property="lastName" action="updateLastName"}}
{{editable-property property="city" action="updateCity"}}

When the user edits the firstName, the TextField component calls updateFirstName on the editable-property wrapper component with a parameter (the new value); the wrapper component in turn calls modifyPersonInternals on the route with two parameters (the property to modify, and the new value). This works but seems clunky/hacky and can't be the right approach, can it?

当用户编辑firstName时,TextField组件使用参数(新值)在editable-property包装器组件上调用updateFirstName;包装器组件依次使用两个参数(要修改的属性和新值)调用路由上的modifyPersonInternals。这有效,但似乎笨重/ hacky,不能是正确的方法,可以吗?

Also, here's my unsuccessful attempt to implement a placeholder in editable-property.js,

此外,这是我在editable-property.js中实现占位符的尝试失败,

hasEmptyProperty: Ember.computed(function() {
    return ((this.get('property') === "") || (this.get('property') === null));
})

and in editable-property.hbs:

在editable-property.hbs中:

{{#if hasEmptyProperty}}
<div class="placeholder" {{action "editProperty"}}>{{placeholder}}</div>
{{else}}
<div {{action "editProperty"}}>{{bufferedProperty}}</div>
{{/if}}

I get an error that hasEmptyProperty is not defined.

我收到一个未定义hasEmptyProperty的错误。

1 个解决方案

#1

If you are passing the model into the component anyway, why not just directly associate the models property with your input?

如果您仍然将模型传递给组件,为什么不直接将models属性与您的输入相关联?

{{input value=model.firstName}}

This will achieve your goal, but if you are trying not to pass the model into the component then the best way is to send an action as you are doing.

这将实现您的目标,但如果您尝试不将模型传递到组件中,那么最好的方法是发送您正在执行的操作。

With regard to the hasEmptyProperty I would instead have a property called hasEmptyProperty and a function that sets it, something like...

关于hasEmptyProperty,我会改为使用一个名为hasEmptyProperty的属性和一个设置它的函数,类似于......

checkEmptyProperty: function() {
  var property = this.get('property');
  if(property === "" || property === null ) {
    this.set('hasEmptyProperty', true);
  } else {
    this.set('hasEmptyProperty', false);
}.observes('property'),

#1