如何创建一个为属性添加1的Ember计算属性？ [英] How to create an Ember computed property that adds 1 to a property?

问题描述

我正在学习Ember，我对计算的属性有些困惑。指南中的所有内容都会使用字符串，例如计算出的属性，用于创建一个名字和名字等等。无论如何，我对如何使用整数感到困惑，因为它似乎语法几乎要求使用字符串。

例如，我的控制器上有一个名为 count 的属性。

 从ember导入Ember; 
 
导出默认Ember.Controller.extend（{
 count：0，
 
计数器：Ember.computed（'count'，function（）{
 var num =`$ {this.get（'count'）}`; 
 var newNum = parseInt（num）+ 1; 
 this.set（'count'，newNum）; 
 return this.get（'count'）; 
}）
}）; 
  

我知道这段代码真的很糟糕，我只是想说明我正在试图做和失败为什么 Ember.computed 将一个字符串作为其第一个参数？

为什么我必须使用字符串当我使用一个整数，而不是字符串时，在 this.get 和 this.set 我必须手动解析int或者它返回一个字符串，为什么它将我的count属性转换成一个字符串？

无论如何，在ember检查器中，当我运行

$ E.get（'count'）

它确实成功添加1，但不能继续添加1，这使我认为它不更新实际的计数属性。

非常感谢我感谢帮助。

解决方案

我设置了一个 Ember Twiddle 根据你的代码。我会尝试解决你的每一个问题：

你可以将一个 Ember.Object 围绕 {} 。所有 Ember.Object 键是字符串，因为 {} 键是JavaScript中的字符串。

对于存储在 Ember.Object ，该属性是一些值作为其关键字符串。要查找该值，您必须提供值的路径或位置，如密钥给出的（就像哈希表）。这就是为什么您需要在 get 和设置中指定一个字符串。

值可以是Javascript中的任何类型，而不仅仅是字符串。看看我发布的 Ember Twiddle ，并打开你的控制台。在您的代码中， num 是一个字符串，因为您已将其包装在ES6模板字符串中，该字符串正在转换 this.get（'计数'）。

---

Ember.computed 被设计为将数据呈现到模板中。重要的是要了解：

• 这是懒惰


• 它缓存计算结果


• 如果一个或多个属性取决于更改，Computate Property将仅重新计算。

当您调用 Ember.computed 时，您首先传入任意数量的字符串。每个字符串都是您的CP依赖的值（在 Ember.Object 上）的路径。

由于CP是懒惰的，'counter'只会在您的代码访问时计算，或一个模板如果'count'更改，缓存值'counter'将被遗忘。

情况下，'counter' CP功能只运行一次，因为'count'从不改变。这就是为什么你只观察一个添加。

I'm just learning Ember and I'm a bit confused about computed properties. Everything in the guides uses strings, like a computed property that creates a full name out of a first and last name, etc. Anyway, I'm confused about how to use integers because it seems like the syntax almost demands the use of strings.

As an example, I have a property on my controller called count.

import Ember from 'ember';

export default Ember.Controller.extend({
  count: 0,

  counter: Ember.computed('count', function() {
    var num = `${this.get('count')}`;
    var newNum = parseInt(num) + 1;
    this.set('count', newNum);
    return this.get('count');
  })
});

I know this code is really bad, I'm just trying to illustrate what I'm trying to do and failing at. Why does Ember.computed take a string as its first parameter?

And why do I have to use a string in this.get and this.set when I'm working with an integer, not a string? I have to manually parse the int or else it returns a string, why is it converting my count property into a string?

Anyway, in the ember inspector when I run

$E.get('count')

it does successfully add 1, but fails to continue to add 1, which makes me think its not updating the actual count property.

Thanks very much. I appreciate the help.

解决方案

I set up a Ember Twiddle based on your code. I'll try to address each of your questions:

You can think of an Ember.Object as a wrapper around {}. All Ember.Object keys are Strings, because {} keys are strings in Javascript.

For each property stored on an Ember.Object, that property is a value with some String as its key. To look up that value, you have to provide the "path" or "location" of the value, as given by the key (just like a hash table). This is why you need to specify a string in get and set.

Values can be any type in Javascript, not just strings. Take a look at the Ember Twiddle I posted, and open up your console. In your code, num is a string because you've wrapped it in an ES6 template string, which is converting the value of this.get('count').

---

Ember.computed was designed to render data into templates. It's important to understand that:

• It's lazy
• It caches the result of the computation.
• A Computed Property will only recompute if one or more of the properties it depends on changes.

When you call Ember.computed, you first pass in any number of strings. Each string is a path to a value (on an Ember.Object) that your CP "depends" on.

Because CPs are lazy, 'counter' will only be computed when you access it in your code, or in a template. If 'count' were to change, the cached value of 'counter' would be forgotten. The next time 'counter' were accessed, it would recompute.

In this case, the 'counter' CP function only runs once, because 'count' never changes. This is why you only observe one addition.

这篇关于如何创建一个为属性添加1的Ember计算属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！