AngularJS 中 Knockout 的可写计算可观察量的模拟是什么?

2024-01-03

我在我的项目中使用 KnockoutJS,但想学习 AngularJS,因为它有很多 Knockout 没有的美味功能。 所以我有兴趣使用 Angular 重写我的一些代码。但我不明白如何做一些我在淘汰赛中使用的简单事情。 例如,Knockout 具有计算可观察量的功能。这很酷! 我已经发现我可以使用一个简单的函数来代替。但是 Knockout 为计算的可观察量提供了“写入”功能,例如:

var first_name = ko.observable('John'),
    last_name = ko.observable('Smith'),
    full_name = ko.computed({
        read: function(){
            return first_name() + ' ' + last_name();
        },
        write: function(new_value){
            var matches = new_value.match(/^(\w+)\s+(\w+)/);

            first_name(matches[1]);
            last_name(matches[2]);
        }
    });

JSFiddle 上的这段代码:http://jsfiddle.net/Girafa/QNebV/1/ http://jsfiddle.net/Girafa/QNebV/1/

当我更改“full_name”时,此代码允许我更新“first_name”和“last_name”可观察值。如何使用 AngularJS 来完成它?一个带有参数的函数被检查是否存在?像这样的东西吗?

first_name = 'John';
last_name = 'Smith';
full_name = function(value){
    if (typeof value != 'undefined')
    {
        // do the same as in the Knockout's write function
    }
    else
    {
        // do the same as in the Knockout's read function
    }
}

最佳实践是什么?


我找到了这样的解决方案:http://jsfiddle.net/Girafa/V8BNc/ http://jsfiddle.net/Girafa/V8BNc/

我们不使用 Angular $watch 方法,而是设置 fullName 属性的本机 JavaScript getter 和 setter:

Object.defineProperty($scope, 'fullName', {
    get: function(){
        #...
    },
    set: function(newValue){
        #...
    }
})

认为这更方便,因为我不需要在代码中创建任何特殊的观察者。但我不知道该解决方案的浏览器支持情况。

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

AngularJS 中 Knockout 的可写计算可观察量的模拟是什么? 的相关文章

  • React hooks 状态变量在重新渲染后未更新

    在下面的示例中 我有一个想要更新的元素 水果 数组 并使用更新后的数组执行其他操作 在本例中保存更新后的列表 我的理解是重新渲染状态将更新 但它不在这里 或者状态更新和我的操作之间存在延迟 In the addFruit功能我可以看到 Pe
  • JavaScript 可以检测用户的浏览器是否支持 gzip 吗?

    我可以使用 JavaScript 来检测用户的浏览器是否支持 gzip 压缩内容 客户端 而不是 Node js 或类似内容 我正在尝试支持以下边缘情况 有很多可能的文件可以加载到特定的 Web 应用程序上 最好在应用程序运行时根据需要加载
  • 为动态加载的 HTML 内容触发 Bootstrap JS 行为

    我正在动态加载包含 Bootstrap 标记的 HTML 模板 但是 Bootstrap Javascript 行为不会应用于加载的内容 例如 如果加载的内容包含 Bootstrap 模式的标记 则该模式将无法正确运行 有没有办法可以触发
  • 个人 Tumblr 帖子上的 Javascript

    我知道您可以编辑在 tumblr 博客上呈现所有帖子博客主页的 html AngularJS 但是 有什么办法可以添加自定义到各个帖子 我想在逐个帖子的基础上做一些 javascript 的东西 但似乎无法找到可以编辑代码的位置 或者 如果
  • Angular UI-Router:多个 URL 到单一状态

    我已经开始使用 Angular 的 ui router 并且我正在尝试弄清楚如何让多个 URL 引用单个状态 例如 orgs 12354 overview retyrns the same pages as org overview 我的
  • 在 UIWebView 中禁用复制和粘贴

    几乎 我已经尝试了一切方法来禁用复制 粘贴UIWebView但对我来说没有任何作用 我正在加载我的UIWebView来自字符串 字符串数组 如下所示 webView loadHTMLString NSString stringWithFor
  • 对使用“new”创建的数组上“map”的行为感到困惑[重复]

    这个问题在这里已经有答案了 我对结果感到困惑mapping 使用创建的数组new function returnsFourteen return 14 var a new Array 4 gt undefined x 4 in Chrome
  • jquery 中可点击 div 中的按钮

    我有整个 div 您可以单击它来切换该 div 的主要部分 问题是我在该 div 中也有可点击的按钮 当我点击它时 它会执行它应该做的事情 但同时也会切换整个 div 我怎样才能禁用它 Use event stopPropagation 单
  • 使用 Javascript/Node.js 在代码内执行 mongoimport

    node js javascript 中是否有任何库可供个人使用mongoimport在代码中 据我了解 mongoimport 有点像 exe 您必须先执行它 然后才能使用其文本输入环境 是否可以在我的代码中执行 mongoimport
  • 如何在打字稿中使用外部js

    我通过 Typescript 代码生成 Angular JS 代码 在一种情况下 我需要将外部 JS 文件添加到我的打字稿文件中 并且需要访问 js 文件中的类 我像这样添加js文件
  • 如何使用 Javascript 在 html 文件中搜索字符串?

    我有 5 个 html 文件 并且有一个搜索表单 我想用它来搜索这些 html 文件中的文本
  • 为什么我的 D3 SVG 图上的轴不会更新?

    I have 简单的 D3 散点图 http www raxacoricofallapatorius com test scattertest html我在显示数据的几个不同属性之间切换 但是虽然我可以更改数据点 并按照我想要的方式进行转换
  • Javascript等待/异步执行顺序

    所以我试图把我的头脑集中在 Promise await async 上 我不明白为什么当 go 执行时 带有 finished 的警报会紧随 console log coffee 之后 当所有函数都使用等待 承诺时 为什么它只等待 getC
  • 什么时候可以使用Javascript,什么时候不可以?

    不使用太多 javascript jquery 是个好习惯吗 我们应该尽可能避免它 为了良好的可访问性 吗 什么时候可以使用 JavaScript 什么时候不能在网页设计和开发中使用 JavaScript 在什么场景 什么条件下 Updat
  • 离子初始加载时间

    我正在使用 Ionic 构建一个简单的应用程序 但我的应用程序在冷启动时的初始加载时间方面存在性能问题 这是我所做的 collection repeat 代替带有 track by 的 ng repeat 原生滚动 overflow scr
  • 如何使用 fetch() 和 WhatWG 流获取文件上传进度

    注意 我并不是在寻找任何替代方案 我知道这可以通过 XMLHttpRequest 来完成 我也不关心浏览器支持 我只想了解新的 即将推出的标准 我有一个File https developer mozilla org en US docs
  • 如何使用 jQuery 过滤 DropDownList 中的选项

    我有 2 个 DropDownList 第一个 DropDownList 有 4 个选项 第二个 DropDownList 有 20 个选项 我想要一个选项value 1在第一个 DropDownList 中选择我在第二个 DropDown
  • 如何在 AngularJS 中测试具有解析属性的控制器?

    如何测试具有解析属性的控制器 它会抛出一个错误 未知提供者 InitProvider 在测试期间 这是可以理解的 我该如何测试它 我使用路由配置中的 init 属性来加载数据 并在控制器实例化时将其传递给控制器 以便在加载数据之前路由不会更
  • Typescript 中的 Angular 服务具有依赖注入和缩小功能

    我现在正在努力让我的头脑围绕 Angularjs 我目前正在寻找服务 我也使用打字稿来编写代码 现在 从网络上的示例中 我看到人们在打字稿中使用如下所示的服务 class Service constructor private http n
  • 使用
    元素作为 JavaScript 代码的输入。这是最好的方法吗?

    各位 显然 我是编码新手 所以最近完成了一些有关 HTML 和 Javascript 的 Lynda 课程后 我的简单 HTML 页面遇到了困难 基本上 我想要的是使用 JavaScript 进行基本计算 让用户使用 HTML 输入两个数字

随机推荐