【问题标题】:Ember - dynamic value bindingEmber - 动态值绑定
【发布时间】:2014-10-23 18:20:17
【问题描述】:

我在 Ember 应用中有一个看似简单的要求,让我很满意。

我想拿这个:

{{view Ember.TextField valueBinding="fields.firstName"}}

并使 firstName 字段成为变量。这是意图,但显然不起作用:

{{view Ember.TextField valueBinding="fields.{{fieldName}}"}}

我是否遗漏了一些明显的东西?这似乎应该是一个非常基本的事情,但我已经尝试了大约 10 种我认为“应该”有效的不同方法,但它们都没有按预期工作。

【问题讨论】:

  • 只使用value=fields.fieldName。没有引号
  • 这不正确。这绑定到字段中的键“fieldName”,实际上并不存在。

标签: ember.js


【解决方案1】:

您现在可以借助 mut 帮助器将输入值与动态键(变量)绑定

https://guides.emberjs.com/v2.6.0/templates/input-helpers/#toc_binding-dynamic-attribute

{{view Ember.TextField valueBinding=(mut (get fields fieldName))}}

检查以下示例,

var Object = {};
var key = "firstName";

我们可以像这样在输入助手中绑定键,

{{input value=(mut (get Object key))}}

{{Object.firstName}} // Prints the dynamic value in textbox

【讨论】:

    【解决方案2】:

    你必须创建一个计算属性,它会监听fieldName,然后返回值。

    例如见jsbin。这是你想要做的吗?必须记住,Handlebars 是故意的,它非常“愚蠢”,并且不能像您在 Angular 或其他框架中习惯的那样真正进行复杂的计算。控制器应该处理所有这些。

    App.IndexController = Ember.Controller.extend({
    
      fields: {
        field1: 'test',
        field2: 'test2'
      },
    
      fieldName: '',
    
      myFieldName: function() {
        var fields = this.get('fields');
        var fieldName = this.get('fieldName');
    
        return fields[fieldName];
    
      }.property('fieldName')
    
    });
    

    然后,在您看来,绑定到 myFieldName。

    {{view Ember.TextField valueBinding=myFieldName}}
    

    【讨论】:

    • 我认为您的示例与我的示例有相同的问题。这个想法是,如果您稍后尝试显示字段,正确绑定的唯一方法是使用常量字符串。
    • 我认为这是预期的行为。视图层不应该真正做计算的事情,例如访问数组或对象的元素。它还允许您轻松测试该行为,因为它全部封装在控制器逻辑中。
    【解决方案3】:

    您需要让TextField 跟踪计算属性,并让计算属性跟踪变量,而不是让TextField 直接跟踪变量。

    例如,如果您同时拥有firstNamelastName,则可以执行以下操作...

    App.IndexController = Ember.Controller.extend({
    
      //These are the fields you would want to edit
      firstName: 'Tom',
      lastName: 'Dale',
    
      //this is so that we can create a selectbox to choose which field to edit
      availableFields: ['firstName', 'lastName'],
      selectedField: 'firstName',
    
      //This is the computed property which tracks the selected field
      //The text input would be bound to this
      fieldValue: function(key, value){
        var selectedField = this.get('selectedField');
        if (value) {
          this.set(selectedField, value);
        }
        return this.get(selectedField);
      }.property('selectedField')
    
    }); 
    

    您可以在这里看到一个工作箱:http://emberjs.jsbin.com/juhika/1/edit?html,js,output

    【讨论】:

    • 就是这样!我没有利用计算属性可用于设置相关值这一事实。
    • 请注意,计算属性的语法现在已更改:emberjs.com/blog/2015/05/13/…
    【解决方案4】:

    对于动态值绑定,在控制器上创建一个计算属性:

    http://emberjs.com/guides/object-model/computed-properties/

    我还认为 valueBinding 已被弃用。改为使用价值。

    这是另一个类似的问题:Ember TextField valueBinding with dynamic property

    【讨论】:

    • 这没有帮助。另一个问题是 1.5 年的历史,在 Ember 时代永远存在,它也没有完全回答这个问题。并且做一些挖掘让我没有任何迹象表明 valueBinding 已被弃用。
    • valueBinding 绝对不推荐使用。你反应挺快的。您是否尝试在控制器中创建计算属性并在模板中引用它作为传递给文本字段的值?我会为你创建一个 ember.jsbin,但老实说,我正在工作,只是在这里轻松度过。
    • 我已经尝试了很多方法来解决这个问题,包括你的建议。如果您想提供帮助,请提供执行此操作的实际代码。它应该是一个单行,可能有一个小的计算属性函数,所以它不像我要问很多。但是,如果您不知道答案,请不要只是抛出您认为“应该”有效的东西。 “应该”起作用的东西在这里不起作用。
    猜你喜欢
    • 2015-06-05
    • 1970-01-01
    • 1970-01-01
    • 2013-02-08
    • 1970-01-01
    • 1970-01-01
    • 2017-01-28
    • 1970-01-01
    • 2023-03-10
    相关资源
    最近更新 更多