制作一个没有 new 关键字的 javascript 淘汰视图模型

2024-03-24

我正在浏览淘汰教程,所有示例都使用“new”关键字创建视图模型:

//from learn.knockoutjs.com
function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");
  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();    
  }, this);
}
ko.applyBindings(new AppViewModel());

我试图避免使用 new 关键字,它通常工作得很好,但我发现让 fullName 计算属性工作时遇到麻烦。这是我到目前为止所想到的。

function makeViewModel() {
  return {
  firstName: ko.observable("Bert"),
  lastName: ko.observable("Bertington"),
  fullName: ko.computed(function() {
    return this.firstName() + " " + this.lastName();    
  }, this) };
}
ko.applyBindings(makeViewModel());

...这显然失败了,因为“this”不再引用传递给计算的函数内的本地对象。我可以通过创建一个变量并在附加计算函数并返回它之前存储视图模型来解决这个问题,但是如果存在一个更优雅和紧凑的解决方案,不需要我确保相互依赖的方法是按正确的顺序附加,我肯定想用它来代替。

有更好的解决方案吗?


您当然可以通过使函数自调用来绕过使用 new 关键字,但我认为您最好解决“this”关键字的问题。我喜欢向人们展示 3 种创建视图模型的方法。

  1. 对象字面量http://jsfiddle.net/johnpapa/u9S93/ http://jsfiddle.net/johnpapa/u9S93/
  2. 作为一个函数http://jsfiddle.net/johnpapa/zBqxy/ http://jsfiddle.net/johnpapa/zBqxy/
  3. 与揭示模块模式http://jsfiddle.net/johnpapa/uRXPn/ http://jsfiddle.net/johnpapa/uRXPn/

当使用上面的选项2或3时,处理“this”关键字要容易得多。

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

制作一个没有 new 关键字的 javascript 淘汰视图模型 的相关文章

  • 如何清除ember js中的表单数据

    嗨 我对 ember js 很陌生 我写了一个新员工入职表格 并通过路线发送数据 数据保存成功 但问题是提交表单后我的表单数据没有清除 代码如下 app js App Router map function this resource sa
  • 修复 JSLint“意外的‘this’。”错误?

    我试图让以下代码成为符合 jslint 标准 http jslint com 但我陷入以下两个错误 本来应该看到一个声明 结果却看到了一个块 and 意想不到的 这个 我应该对我的代码进行哪些更改才能使 JSLint 满意 var pvAc
  • D3.js分组条形图

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f
  • 检查复选框是否被选中? [复制]

    这个问题在这里已经有答案了 如何通过 jQuery 检查复选框是否被选中 我可以只向元素添加 ID 或类并执行此操作吗 if element val 1 do stuff if element is checked checkbox is
  • CSS 比例和方形中心裁剪图像

    所以我的应用程序中有一个缩略图集合 其大小为200x200 有时原始图像没有这个比例 所以我计划将此图像裁剪为正方形 目前它只是拉伸图像以适合缩略图 所以说我的原始图像大小是400x800 那么图像看起来就很压扁 我想裁剪此图像 以便它查看
  • Node 和 General 中的 MVC:模型如何与视图绑定?

    我从 node js 开始 正在制作一个简单的 MVC 框架 到目前为止 我已经有一个前端控制器 或 调度程序 如果你愿意的话 可以工作 路由通过调度程序配置模块进行 如图所示 我的问题在最后 紧接代码之后 另外 这是学习node的练习 请
  • Firefox(仅限)动态表单操作不起作用

    控制台为操作属性返回空白 我已经移动了 file upload attr action io cfm action updateitemfile item id agenda modal attr data defaultitemid 周围
  • Ng Bootstrap 日期范围选择器 [markDisabled] 不适用于输入

    我正在尝试禁用某些日期ng 引导范围选择器 https ng bootstrap github io components datepicker overview 目前 我在弹出窗口中有一个范围选择器 并且我正在使用 markDisable
  • 使用 ES6 静态函数时,我得到“没有这样的方法”

    我正在尝试为我在 React Native 中工作的项目创建一个包含静态函数的 utils 类 我读到了如何在 StackOverFlow 中创建静态函数question https stackoverflow com questions
  • Javascript:打乱数组中的对象组

    我有一个对象数组 我已按键排序 group如下 使得所有具有相同值的对象group在索引中彼此相邻data 例如 var data foo cat group house foo cat group house foo cat group
  • 是否可以向 JavaScript 函数发送可变数量的参数?

    是否可以从数组向 JavaScript 函数发送可变数量的参数 var arr a b c var func function debug alert arguments length for arg in arguments alert
  • 如何在javascript中删除一组表情符号中的最后一个表情符号?

    假设我的字符串中有 3 个表情符号 字符串中没有任何空格或除表情符号之外的任何其他字符 如何删除javascript中最后一个表情符号 下面的答案不使用任何特殊的包并安全地删除最后一个表情符号 function safeEmojiBacks
  • Javascript - 对父母调用 super 父母?

    我在 Odoo 中定义了当前自定义 javascript 视图的扩展 openerp account move journal test function instance var t instance web t lt instance
  • 如何在 AWS Amplify 上运行 React/Redux 应用程序的代理

    我最近实施了Proxy 在 Express js 中 对于我的反应应用程序发出请求时隐藏 API URL 当我在本地主机上运行代理和应用程序时 它工作得非常好 现在我已准备好将我的应用程序部署到AWS 放大 我对如何让我的代理在那里运行有点
  • 什么是闭包编译器?

    如果您不知道我在说什么 请查看以下内容 http closure compiler appspot com home http closure compiler appspot com home 这是一个 JavaScript 压缩器 在他
  • 使用 Google 地图 API 进行反向地理编码

    我正在研究 JavaScript Google Map API 版本 3 更准确地说 正在研究反向地理定位 在 的帮助下官方文档 http code google com intl fr apis maps documentation ge
  • 将罗马数字转换为阿拉伯数字--recursiv

    我是 JavaScript 新手 正在网站的帮助下学习https www jshero net koans roman1 html https www jshero net koans roman1 html 本练习是编写一个转换器 将罗马
  • RemoveEventListener 在 Firefox 版本 58 中不起作用

    但它在 Chrome 中有效 这是我的 UI EventBus 代码 原型 addEventListener方法是一样的 只不过remove换成了add UI EventBus removeEventListener function ob
  • 有没有用 Javascript 编写的开源 JSDoc 解析器?

    我正在寻找一个可以在我的项目中使用的 JSDoc 解析器 我正在寻找可以传递 JSDoc 注释并接收该注释含义的结构化描述的东西 我见过的大多数工具似乎都能够将 JSDoc 注释转换为 HTML 或其他格式 我正在寻找能够提供可用于输入其他
  • IE 中带有“删除”方法的 jQuery.ajax 问题

    我有一个页面 用户可以使用按钮编辑各种内容并选择触发 ajax 调用 特别是 一个操作会导致远程调用一个 url 其中包含一些数据和 放置 请求 这 因为我使用的是宁静的 Rails 后端 会触发我的更新操作 我还有一个删除按钮 它调用相同

随机推荐

  • WP7 在地图上拖动图钉

    有谁知道如何在运行 Mango 的 WP7 客户端上的地图上实现可拖动图钉 我有一个图钉绑定到地图上的地理位置 我希望用户能够将其拖动到地图上并记录其新位置 我见过一些资源 但它们用于非 WP7 Bing 地图控制 任何帮助 将不胜感激 T
  • 如何使用 Asset Pipeline 从非标准目录传送字体

    我正在尝试将 Fontawesome 包含在 Rails 4 应用程序中 但资产并未进入资产管道 然而 这些字体并没有在生产中使用 我不明白为什么 文件结构组织 我所有的资产都存储在 assets components因此 Fontawes
  • Node.js 公牛队列中的作业陷入“等待”状态

    我有一堆工作在公牛队列中 其中一个被卡住了 1 个多小时 通常需要大约 2 分钟才能运行 但没有失败 我无法使用我使用的 bull arena UI 将作业从活动状态中删除 因此我删除了 Redis 中活动作业的密钥 这消除了卡住的活动作业
  • php 中的图像验证码

    下面是一个程序的源代码 谁能帮我弄清楚程序的工作原理
  • 在 Android 手机中打开键盘时图像大小调整问题

    感谢您的阅读 我是cordova开发的新手 我正在使用framework7使用cordova开发混合应用程序 我将背景放在登录表单上 但在移动设备中 当打开键盘进行书写时 背景图像会调整大小 我想要修复打开 Android 键盘时未调整大小
  • r-将列表列转换为字符向量,其中列表是字符

    我正在尝试将列表转换为单个字符值 或者基本上从这里开始 test lt data frame a c 1 1 1 2 2 2 b c a b c d e f gt group by a gt summarise b list b to th
  • 在 Elasticsearch 和 Lucene 4.4 中使用 Shingles 和停用词

    在我正在构建的索引中 我有兴趣运行查询 然后 使用方面 返回该查询的带状疱疹 这是我在文本上使用的分析器 settings analysis analyzer shingleAnalyzer tokenizer standard filte
  • 如何检查 AlarmManager 是否已经设置了闹钟?

    当我的应用程序启动时 我希望它检查特定警报 通过 AlarmManager 注册 是否已设置并正在运行 谷歌的结果似乎表明没有办法做到这一点 这仍然正确吗 我需要执行此检查 以便在采取任何操作创建新警报之前向用户提供建议 跟进 ron 发表
  • 如何将数据直接写入显存?

    程序员有什么办法可以直接将数据写入显存吗 我知道操作系统对此非常严格 但是某些类型的应用程序 例如视频播放器或电脑游戏 如何将其数据直接写入视频内存 我知道有很多知名的库 例如 OpenGL 但它们毕竟只是普通的库 它们和我和你写的程序没有
  • 有没有办法在不修改 Yocto 的情况下为机器 ID 创建链接?

    我正在运行使用 Yocto Zeus 3 0 0 构建的 Linux 4 14 149 我正在运行只读文件系统 最近发现一个问题 我的 UID etc machine id 每次启动都会发生变化 这个问题的结果 https superuse
  • wpf应用程序在调试模式下运行,但在没有调试的情况下不会运行

    我的 WPF 应用程序在 VS2015 中以调试模式成功运行 但是 在不调试的情况下启动时 应用程序启动并立即完成 从 Debug Release 文件夹启动 exe 文件时也会发生同样的情况 事件查看器显示以下 Net 运行时错误 应用程
  • 在elasticsearch中存储日期格式

    当我想向 Elasticsearch 添加一个日期时间字符串时 我遇到了一个问题 该文件如下 LastUpdate 2013 07 24 00 00 00 该文档提出了一个错误 即 NumberFormatException For inp
  • WCF服务的启动方法在哪里?

    我需要在第一次调用 wcf 服务之前运行一些方法 我应该将这些方法放在哪里 WCF服务的启动方法在哪里 Obs1 我的 WCF 服务将在 IIS6 上运行 Obs2 我正在使用 net框架4 0 实现此目的的一种方法是自行托管 WCF 服务
  • 如何将 MouseEvents 添加到 AbsolutePanel?

    如何在不创建 Composite widget 的情况下将 MouseEvents 特别是 MouseOutHandlers 添加到 AbsolutePanel 或者这可能吗 据我所知 它涉及添加 DomHandler 和 HandlerR
  • import java.util.*; 和有什么区别并导入java.util.Date; ?

    我只想输出电流 我写了 import java util 一开始 并且 System out println new Date 在主要部分 但我得到的是这样的 Date 124bbbf 当我将导入更改为import java util Da
  • 当一条语句中多次调用同一个UDF时,它会被调用多少次?

    在以下 t sql 语句中 dbo FUNC 函数将被调用多少次 SELECT column1 column2 dbo FUNC column3 AS column3 FROM table1 WHERE dbo FUNC column3 g
  • 如何对 Java EE 代码进行单元测试?

    我想问一下您测试 Java EE 代码的首选方式 我发现只有三个项目试图帮助在 Java EE 环境中编写单元测试代码 http jakarta apache org cactus http jakarta apache org cactu
  • 如何使用函数或正则表达式从单元格中删除所有数字?

    我的单元格如下所示 每行一个 约翰 达菲 遗产 文明与犹太人 号角曲和合唱曲 交响舞曲 管弦乐组曲 伯恩斯坦 镇上 舞蹈片段 皇家爱乐乐团 R 威廉姆斯 莉莲 伊格纳斯 1897 1963 歌曲 1920 1935 安雅 范 韦克 Anja
  • 两个库包含相同的库

    我收到错误 ld 24 duplicate symbols for architecture arm64 clang error linker command failed with exit code 1 use v to see inv
  • 制作一个没有 new 关键字的 javascript 淘汰视图模型

    我正在浏览淘汰教程 所有示例都使用 new 关键字创建视图模型 from learn knockoutjs com function AppViewModel this firstName ko observable Bert this l