.property() 的作用是什么?在函数(){}.property()中

2024-03-23

Todos.TodoController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

我正在研究 Ember.js 的 ToDo 指南,但我似乎无法理解这个控制器是如何工作的。 .property() 是什么意思?当我删除“返回值”时,为什么会这样?线功能保持不变。如果有人能准确解释这里发生的事情那就太好了。

指南链接:http://emberjs.com/guides/getting-started/marking-a-model-as-complete-incomplete/ http://emberjs.com/guides/getting-started/marking-a-model-as-complete-incomplete/


在 javascript 中,获取或设置一个属性时进行某些处理的唯一方法是使用对象.defineProperty https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty:

Object.defineProperty(person, "b", {
  get : function() { 
    return person.firstName + ' ' + person.surname; 
  },
  set : function(newValue) {
    var names = newValue.split(' '); 
    person.firsname = names[0];
    person.surname = names[1]; 
  },
  enumerable : true,
  configurable : true
});

但这有一些缺点:

  • 不是跨浏览器
  • 没有约束力,换句话说,如果firstname or surname变化,从属财产fullname没有改变。
  • Calling person.name when person未定义,抛出错误
  • 不可能触发观察者,没有额外的代码并且了解依赖关系层次结构:firstname取决于fullname,并且它可以依赖于其他属性啊啊啊!

因此Ember有了“财产”的概念,称为计算属性 http://emberjs.com/guides/object-model/computed-properties/.

它可以通过两种方式声明:

foo: Ember.computed(function({
  ...
}).property(dependent keys);

或使用时(默认)Ember.ENV.EXTEND_PROTOTYPES = true:

foo: function() {
  ...
}.property(dependent keys);

The property(dependent keys), 是必需的,因为它告诉 ember 什么是属性,当更改时,将使属性更新。

fullname: function(key, value) {
  // setter
  if (value !== undefined) {
    var names = value.split(' ');
    this.set('firstname', names[0]);
    this.set('surname', names[1]);
  }
  // always return the complete result, so nexts calls to this.get('fullname') will return the cached value  
  return this.get('firstname') + ' ' + this.get('surname');
}.property('firstname', 'surname')

使用此功能,您可以获得以下优势:

  • 当改变时firstname or surname到一个新的值,fullname被改变了。
  • The beforeObserves在更改值之前触发,并且observes值改变后触发。
  • 任何引用某些属性的模板都会更新
  • 多次调用 person.get('firstname') 将返回缓存的值,从而节省处理。您可以使用禁用此功能.property(..).volatile()
  • 访问 null 对象时,避免 null 或未定义的错误,例如:controller.get('person.dog.name')回报undefined,如果人或狗未定义。

我希望它有帮助

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

.property() 的作用是什么?在函数(){}.property()中 的相关文章

  • 使用 AngularJs NgResource 从本地主机加载 JSON 文件

    Overview 我正在构建一个应用程序 在 MAMP 上运行 该应用程序包含联系信息 一旦该部分正常运行 该应用程序将扩展以包含更多数据 例如项目名称和截止日期 问题 当用户访问时 projects php project 我希望他们看到
  • 固定长度的随机数

    我想生成一个 0 9 数字且长度 5 的随机整数 我尝试这样做 function genRand min max for var i 1 i lt 5 i var range max min 1 return Math floor Math
  • 无限水平滚动 Div

    我需要一个 div 当您将鼠标进一步向右或向左移动时 它会水平滚动 我发现 Smooth Div Scroll 插件 http www smoothdivscroll com 非常接近我的需要 然而 这存在一些问题 我需要能够使滚动元素从设
  • Typescript:如何在 Redux 中输入 Dispatch

    例如我想删除dispatch any here export const fetchAllAssets gt dispatch any gt dispatch actionGetAllAssets return fetchAll getPr
  • 使用 jquery UI 调整大小的分屏 div

    我心中有一个设计 涉及 html 中的拆分面板视图 类似于 winforms 拆分面板 我一直在尝试jQuery UI 可调整大小 http jqueryui com demos resizable我喜欢这个功能 我只是似乎无法协调两者的大
  • 如何连接我的 angular2 应用程序 javascript 文件

    对于我的 Angular2 TypeScript 应用程序 我将所有 js 文件合并到一个 app min js 文件中 然后 System import 将此文件导入到我的 index html 页面 然后我得到一个同一模块文件中的多个匿
  • 多个链接 dc.js 图表的 d3-tooltips

    我正在寻找修改 dc js 的开箱即用工具提示 似乎有一个解决方案使用d3 js 工具提示 https github com Caged d3 tip as in 这个问题 https stackoverflow com questions
  • 为什么 jQuery 的 .change() 事件仅在单击鼠标右键时触发?

    我在使用 jquery 时遇到了问题 change 当我修改输入元素时发生事件 据说 每当我对所述元素进行实时更改时 该事件就会触发 但就我而言 它仅在我按下右键单击按钮后才会触发 这是我的代码laravel框架 HTML div clas
  • 是否可以加载本地版本的 JavaScript 文件而不是服务器版本?

    只是有一个简单的问题要抛出 看看是否有解决方案 假设我无法访问服务器 我加载一个网页 发现他们有一个从子文件夹加载的 Javascript 文件 比方说 scripts js some js 现在 我想在本地对此文件进行更改 并针对整个站点
  • 跳过测试文件 Jest 中的一项测试

    我正在使用 Jest 框架并有一个测试套件 我想关闭 跳过其中一项测试 谷歌搜索文档没有给我答案 您知道答案或需要检查的信息来源吗 我在这里找到了答案 https devhints io jest https devhints io jes
  • Django CBV表单提交返回的JSON显示为新页面

    我正在使用 Django 3 2 我正在创建一个简单的时事通讯订阅表格 表单提交将 JSON 返回到前端 然后应该使用前端来更新页面的部分内容 但是 当我发布表单时 JSON 字符串将在新页面上显示为文本 这是调用视图的路由 urlpatt
  • 将 Blob 设置为 iframe 的“src”

    以下代码在 Chrome 中完美运行 但它不适用于 IE 有人可以告诉我这里出了什么问题吗 iframe src 也设置为 blob 如下所示
  • d3 饼图中的文本被路径覆盖

    我正在尝试按照 d3 的饼图示例进行操作http bl ocks org mbostock 3887235 http bl ocks org mbostock 3887235 我的代码的最小示例 const container graph
  • 如何在phonegap中同时使用相机API选择多个图像?

    如何同时选择或拾取多个图像phonegap camera API使用时Camera DestinationType FILE URI 我一次只能选择一张图像 我可以使用以下命令在 SD 卡中选择多个文件 包括 txt pdf this ht
  • Angular 2.0 路由 - TS 2305 ...没有导出成员“ModulewithProviders”

    我正在关注一个角度2 0教程在 Angular JS 官方上site https angular io docs ts latest tutorial toh pt5 html并在路由练习结束时陷入困境 该代码上次有效 但前几天我点击 np
  • 在 Node.js 中封装 require 可以解决相对路径调用

    我正在尝试创建一个 require 包装器来加载依赖项 但我发现很难让它像原始的 require 函数一样工作 当路径是相对路径时 包装器无法解析为正确的路径 因为我的加载程序和调用程序文件不在同一文件夹中 这是一个简化的描述 index
  • 如何取消 ComponentWillUnmount 中的所有请求?

    根据docs https facebook github io react docs react component html componentwillunmount ComponentWillUnmount 能够取消请求 我有一个页面发
  • Origin 无权使用地理定位服务 - 即使通过 HTTPS

    我有一个通过 HTTPS 使用 HTML5 地理定位的网页 它在桌面浏览器上运行良好 然而 在 iOS Safari 上 我收到错误 Origin 无权使用地理定位服务 我已确保页面上的所有内容都通过 HTTPS 加载 每个图像 每个脚本和
  • 如何在JAVascript中删除具有相同ID但display='block'和display='none'的div

    我有超过 1 个 div 具有相同的 id 但其中一个具有 display block 和其他人有显示 无 我想删除所有具有 display none 的 div 请告诉最简单的方法 文档中多个元素具有相同的 id 是违反 W3 标准的 请
  • 如何在没有消息时隐藏 Bootstrap 警报框

    我用 Bootstrap 做了一个简单的警报框 如下所示 div class alertBox span class alert alert info bag session username span div When there is

随机推荐