Question

我正在尝试创建几个输入，立即更新我的Ember Data模型，而不进行提交操作。 E.g。

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

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

占位符在我尝试实现它们时没有工作（见下文） - 似乎我可以使用TextSupport mixin更轻松地完成这项工作，但我不知道如何使用它。
我不喜欢我将改变行动发送到路线的方式，基本上就是这样：

在顶级组件{{person-view action="modifyPersonInternals"}}中，我的包装组件如下：

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

当用户编辑firstName时，TextField组件使用参数（新值）调用updateFirstName包装器组件上的editable-property;包装器组件依次使用两个参数（要修改的属性和新值）调用路径上的modifyPersonInternals。这有效，但看起来很笨拙，并且不是正确的方法，可以吗？

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

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

并在editable-property.hbs中：

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

我收到hasEmptyProperty未定义的错误。

Answer 1

如果您要将模型传递到组件中，为什么不直接将models属性与您的输入相关联？

{{input value=model.firstName}}

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

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

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

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

1 个答案: