您在一次渲染中修改了 *** 两次

2024-05-01

升级到 1.13 后,出现此异常,但我不知道问题出在哪里。我也找不到任何有用的资源来解决我的问题。

我在另一个计算属性中设置的属性会发生这种情况。但这个属性肯定只被调用一次。

我创建了一个 jsbin 示例:http://emberjs.jsbin.com/roderameya/edit?html,js,控制台,输出 http://emberjs.jsbin.com/roderameya/edit?html,js,console,output

UPDATE

根据要求,我发布了一些更接近我的实际实现的代码。

Ember.Controller.extend({

  filter: '',

  resultCount: {
    total: 0,
    matches: 0,
    mismatches: 0
  },

  results: function() {
    var items = this.get('model'),
        matches = [],
        resultCount = {};

    // Apply search filter
    matches = items.filter(function(item){
      // Just a dummy filter function
      return true;
    });

    // We need the total number matched by the filter string
    resultCount.total = matches.length;

    // The already matched items must be narrowed further down
    matches = matches.filter(function(item) {
      // Another filter function
      return true;
    });

    resultCount.matches = matches.length;
    resultCount.mismatches = resultCount.total - matches.length;

    this.set('resultCount', resultCount);

    return matches;

  }.property('model', 'filter'),

});

尝试让您的属性不设置其他属性,而是相互依赖:

App.IndexController = Ember.Controller.extend({
  count: function() {
    return this.get("data.length") || 0;
  }.property('data.length'),

  data: [1,2,3]
});

为您更新了 jsbin http://emberjs.jsbin.com/lusuxe/1/edit?html,js,console,output.

UPDATE

基本上,您的 resultCount 是一个我们可以删除的临时变量,其余的只是将计算属性链接在一起:

更新了 jsbin 以获取高级示例 http://emberjs.jsbin.com/qalube/7/edit?html,js,output

code:

// Index controller
App.IndexController = Ember.Controller.extend({
  count: Ember.computed('filteredItems.length', function(){
    return this.get('filteredItems.length');
  }),

  data: [
    Ember.Object.create({ name: "jim", age: 15 }),
    Ember.Object.create({ name: "jeff", age: 42 }),
    Ember.Object.create({ name: "eric", age: 7 })
  ],

  filter: RegExp(".*"),
  ageFilter: -1,

  mismatchCount: Ember.computed('filteredItems.length', 'secondPassFilteredItems.length', function() {
    return this.get('filteredItems.length') - this.get('secondPassFilteredItems.length');
  }),

  filteredItems: Ember.computed('data', 'filter', function() {
    var controller = this;
    return this.get('data').filter(function(item) {
      return item.get('name').match(controller.get("filter"));
    });
  }),

  secondPassFilteredItems: Ember.computed('filteredItems', 'ageFilter', function() {
    var controller = this;
    var ageFilter = controller.get("ageFilter");
    if (Ember.isEqual(ageFilter, -1)) {
      return this.get('filteredItems');
    } else {

      return this.get('filteredItems').filter(function(item) {
        // more filtering
        return item.get("age") <= ageFilter;
      });
    }
  }),

  results: Ember.computed.alias('secondPassFilteredItems'),

  actions: {
    filterByJ: function() {
      this.set('filter', new RegExp("j"));
    },
    filterByEric: function() {
      this.set('filter', new RegExp("eric"));
    },
    filterAllNames: function() {
      this.set('filter', new RegExp(".*"));
    },
    filterYoungins: function() {
      this.set('ageFilter', 15);
    },
    filterAllAges: function() {
      this.set('ageFilter', -1);
    }
  }

});

模板用法:

<script type="text/x-handlebars" data-template-name="index">
    <p>Results found: {{count}}</p>
    <p>Diff between first and second filter: {{mismatchCount}}</p>
    <p>First Filter:
      <button {{action 'filterAllNames'}}>all people</button>
      <button {{action 'filterByJ'}}>People with J in name</button>
      <button {{action 'filterByEric'}}>People named 'eric'</button>
    </p>
    <p> Second Filter:
      <button {{action 'filterAllAges'}}>all ages</button>
      <button {{action 'filterYoungins'}}>15 years old or younger</button>
    </p>
    <ul>
    {{#each results as |item|}}
      <li>{{item.name}} is {{item.age}} years old</li>
    {{/each}}
    </ul>
  </script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

您在一次渲染中修改了 *** 两次 的相关文章

  • 集成 bootstrap-select 以与 Ember 配合使用

    我想得到引导选择 https github com silviomoreto bootstrap select使用 Ember js Ember 对视图对象的管理存在一些问题 导致其无法按预期工作 JSFiddle http jsfiddl
  • 将带有参数的视图组件渲染到名为outlet ember.js 中

    我的应用程序模板中有 2 个命名网点 slider area and pre footer 有没有一种方法可以传递带有参数的视图组件 如main slider索引模板中显示的组件是否连接到命名出口 所以我需要通过 main slider s
  • 在 Ember.js 中,存储保存和存储提交之间有什么区别?

    有什么区别 this get store commit and this get store save 没有区别 save是一个别名commit与此一起介绍的PR 使 commit 成为 save 的别名 https github com
  • Ember.js:从集合中检索随机元素

    我有这样的路线 App RandomThingRoute Ember Route extend model function return App Thing find random 这需要一趟 things randomAPI端点 我在控
  • arrayWillChange 中“无法调用未定义的‘销毁’方法”

    我有一个非常标准的数组 模板关系设置 但是当我将一个新项目推入数组时 我得到了上面提到的内容Cannot call method destroy of undefined错误在arrayWillChangeEmber源码的方法 for id
  • ember 中可重用对象的架构

    我正在使用 ember 构建一个管理仪表板 我想创建一个可重用的图表对象 我可以在整个应用程序中拥有多个实例 图表对象应该有一个由一些标记和一个画布元素组成的模板 在插入 DOM 后我需要其 id 以便附加实际的图表 chart js 我尝
  • 保存 ember 数据模型后的转换

    我想在创建帖子后进行转换 post new gt 单击提交 gt Rails 后端成功创建帖子并响应 json gt 重定向到新创建帖子的路径 在 ember data example github 源代码中 他们使用这种方法 transi
  • 如何更改 Ember 中的查询参数?

    我正在编写一个动作处理程序route application actions changeFoo foo I want to change the fooId queryParam to foo get id 问题是我能找到的唯一记录的更改
  • Ember.js 在特定页面上包含外部脚本

    我试图弄清楚如何包含外部 javascript 源 图表 但仅限于网站上的单个页面 可以在视图或模板中完成吗 我发现只需添加页面模板不起作用 如果我将它添加到整个网站的模板中 它加载得很好 但是它会加载到每个页面上 我的问题的另一面可能更具
  • 防止回车键触发按钮

    我有一个搜索输入框 当用户按下 Enter 时不需要执行任何操作 我正在使用 EmberJS 和 Jquery 以及以下代码 目前 它可以禁止触发弹出窗口 但由于某些原因 在 IE9 中 当按下 Enter 键时 切换按钮将成为焦点 在 C
  • Ember Data:重写 Save 方法

    您好 Ember 数据世界 我一直在研究自定义适配器 试图找出如何覆盖保存方法 根据我的理解 你似乎需要做这样的事情 DS RESTAdapter extend save function return this super 但是 当我尝试
  • 使用 Ember.js 为每个模型添加额外的 url 参数

    我有两个模型 App Providers DS Model extend name DS attr string description DS attr string logo DS attr string products DS hasM
  • 将子记录渲染到特定的出口

    我有这个工作示例jsfiddle http jsfiddle net bazzel SM5VM 我显示的列表Posts 当一个Post选择后 我会在帖子模板的出口中显示详细信息 到目前为止没有问题 由于每Post has many Comm
  • 在车把模板中显示 hasMany ember 关系中的第一项

    我需要显示 hasMany 关系中的第一项 基本上一个线程可以有多个作者 但我只需要在特定模板中显示第一个作者 我有以下 json threads id 1 authors 2 3 authors id 2 fullname foo id
  • 如何处理 ember.js 组件中的自定义事件?

    我是 Ember js 的新手 在理解其原理时遇到了一些问题 我知道行动向上 数据向下但在现实生活中 假设我有Fotorama http fotorama io 在 my gallery 组件中初始化 我不知道这是否可以 但我是在didIn
  • Ember 组件在路由或控制器中调用操作

    我有一个组件 其主要目的是显示一行项目 每行都有一个删除按钮 可以删除一行 如何将操作从模板传递到将在路由器中触发操作的组件 这是使用该组件的模板 templates holiday hours hbs each model as holi
  • Ember.js 动态子视图

    我无法让 ember 渲染动态子视图 似乎一旦渲染了子视图 绑定就会丢失 这是一个jsfiddle http jsfiddle net zaius XYzfa http jsfiddle net zaius XYzfa 当您在两个编辑器页面
  • Ember:如何使用 i18n lib 翻译占位符?

    See http jsfiddle net cyclomarc 36VS3 1 http jsfiddle net cyclomarc 36VS3 1 我正在使用 Ember i18n lib 进行翻译 如何在 Ember TextFiel
  • emberjs 对一条路线使用多个路径/url

    在 Ember 中我可以使用这个 App Router map function this route accomodations 因此 如果访问 accomodations 它将加载该视图 我还可以补充 App Router map fu
  • 找不到将 ember-cli 应用程序迁移到 TypeScript 的模块

    我想在我的 ember 项目中尝试 ts 我之前在小型应用程序上尝试过 所以我有 ember cli typify 0 3 1 typescript 2 0 3 typings 1 4 0 ember cli 2 4 3 在我的里面tsco

随机推荐

  • ReactJS React-pdf 错误“无法加载 PDF 文件。”经过一些尝试

    我创建了一个 React js 应用程序create react app我正在尝试react pdf查看 pdf 我遇到的问题是我的代码有时有效 有时无效 当我第一次加载应用程序时 pdf 总是加载得很好 但如果我访问网站上的其他链接 ur
  • 在广播接收器响应 Intent.ACTION_BATTERY_CHANGED 之前获取电池电量

    我的程序中有一个广播接收器 可以对电池电量做出反应 如下所示 private BroadcastReceiver mBatInfoReceiver new BroadcastReceiver Override public void onR
  • 表名或列名不能以数字开头?

    我尝试创建名为15909434 user语法如下 CREATE TABLE 15909434 user 这当然会产生错误 然后 在我尝试用谷歌进行一些研究后 我发现了一篇很好的文章here http www informit com art
  • WPF 基础知识:MVVM 的共享全局样式

    我正在尝试使用 MVVM 式的方法来进行 WPF 开发 我在 ViewModel 命名空间下有我的逻辑视图模型类 并且在 View 命名空间下有这些视图模型类的匹配样式 现在 我的视图信息位于 ResourceDictionary XAML
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • 在 Flask 中,如何在单击按钮时生成动态 URL?

    例如 现在如果我在表单元素中有两个按钮 当您单击其中任一按钮时 您将被定向到相应的配置文件
  • ld:文件是针对 Mac OS X 上不受支持的文件格式构建的

    我必须使用在其他 x64 86 计算机上编译的共享对象来构建一个项目 我有这个错误 cc std c11 Wall Werror Wextra pedantic I include src server c obj tftp o o bin
  • 在C中获取终端宽度?

    我一直在寻找一种从 C 程序中获取终端宽度的方法 我不断想出的是这样的东西 include
  • 仅在 RMarkdown 中引用作者/在文本引用中添加所有格

    我想引用 RMarkdown 中的一位作者在他的名字中添加所有格 的内容 但是 我找不到在没有出版年份的情况下引用作者或直接添加所有格的方法 s 它应该看起来像这样 在芬纳 2012 的书中 最小工作示例 对于 R 笔记本 title R
  • Java如何使用私钥文件而不是PEM来解密?

    使用 Java 和 Bouncy Castle 1 52 我可以使用以下代码通过 PEM 证书加载私钥 我还有一个相同的 PKCS8 格式的 private key 文件 直接使用private key文件而不是PEM的代码是什么 Stri
  • 了解 keras 中不同序列的 lstm 输入形状

    我对 keras 和 python 都很陌生 我有一个具有不同序列长度的时间序列数据集 例如第一个序列是 484000x128 第二个序列是 563110x128 等 我已将序列放入 3D 数组中 我的问题是如何定义输入形状 因为我很困惑
  • Spring 3.1 和 JPA 2 没有正在进行的事务异常

    我已经这样做了几个星期了 我已经尝试过 eclipselink 现在只是普通的 JPA 我不断遇到同样的问题 每次我尝试刷新实体管理器时 都会收到 javax persistence TransactionRequiredException
  • 从全日历中获取选定的日期

    我将日历添加到我的 asp net mvc 2 应用程序中here http arshaw com fullcalendar 我想选择参加活动的选定日期 我怎样才能获得选定的日期 我还想将此日期和相应的事件保存到数据库中 这还怎么办 设置插
  • 如何使用 C 将带有 2 个变量的 IF 语句转换为 switch 函数?

    我有一个 IF 语句 我想将其转换为 Switch 语句 但它有 2 个变量 在C上可以实现吗 这是一个石头 剪刀 布的游戏 R代表石头 P代表布 S代表剪刀 char play1 play2 printf nPlayer 1 Enter
  • 使用异步函数等待 onclick 的用户输入

    我是异步新手 也许只是不了解基础知识 但我试图通过调用弹出模式并等待用户提交数据的异步函数来等待来自 onclick 的用户输入 在找到一两个甚至提到使用异步等待页面事件的来源后 这对我的特定任务并不是特别有帮助 我想出了这个 asnyc
  • 如何将 Netbeans 项目导入 Eclipse

    我想将我的 NetBeans 项目转移到 Eclipse 这是一个网络应用程序项目 我将 war 文件导入到 Eclipse 中 但无法获取 Java 文件 并且 war 文件给了我很多错误 导入整个项目的最佳方式是什么 另一种简单的方法如
  • Togglz 我的 SpringBoot 的 Yml/Yaml 配置不起作用

    尝试使用 Togglz 创建功能切换 在我的应用程序中进行了以下配置 代码 bootstrap yml togglz enabled true features FEATURE ONE true 功能枚举类 public enum AppF
  • 如何从对象文字数组中切片数组?

    我有这个数组 其中每个索引都包含一个对象文字 所有对象字面量都具有相同的属性 某些对象文字对于给定属性具有相同的值 我想创建一个包含only那些对象文字 我的想法是对数组进行排序 并将其切片成一个新数组 这是数组 var arr arr 0
  • virtualenv、python 和 subversion

    我正在尝试在 python subversion SWIG 库中使用virtualenv no site packages环境 我怎样才能做到这一点 你可以从 svn 将其安装在 virtualenv 中 source home you v
  • 您在一次渲染中修改了 *** 两次

    升级到 1 13 后 出现此异常 但我不知道问题出在哪里 我也找不到任何有用的资源来解决我的问题 我在另一个计算属性中设置的属性会发生这种情况 但这个属性肯定只被调用一次 我创建了一个 jsbin 示例 http emberjs jsbin