Knockoutjs 当父级可观察到的更改时更新子级

2024-04-02

当使用 KnockoutJs 父可观察更改时,如何触发子元素的更新?

在我的应用程序中,我正在构建一个翻译工具。我有一个淘汰赛类,表示某些文本的原始(默认)值,以及翻译后的子项的集合:

function ParentObject(id, defaultValue) {
    var self = this;

    self.id = id;
    self.defaultValue = ko.observable(defaultValue);

    self.children = ko.observableArray();

    self.loadChildren = function () {
       // standard code to load the children ("lazy load", as I have gobs of data)
    }
}

而孩子是

function Child(id, translation, cultureCode) {
    var self = this;

    self.id = id;
    self.cultureCode = cultureCode;
    self.translation= ko.observable(translation);
}

父项的defaultValue 属性绑定到输入控件。

我想要做的是,当我更新父级的默认值时,为每个子级调用我的翻译服务。但我对如何进行有点迷失。

  1. 我如何识别父级的“defaultValue”属性 改变了?
  2. 当我这样做时,我应该迭代父级中的子级吗? 发生了,或者以某种方式将其转移给孩子?

(注意,我的例子是根据实际实现进行简化的)

EDIT:将其与函数一起添加到我的 defaultValue 元素中,仍然传递旧值:

    data-bind=" value: defaultValue, event: {change: updateChildren}"

其中 updateChildren 迭代子数组。


这是一个工作示例:JsFiddle http://jsfiddle.net/gurkavcu/Ft87W/

function ParentObject(id, defaultValue) {
    var self = this;

    self.id = id;

    self.defaultValue = ko.observable(defaultValue);

    self.defaultValue.subscribe(function(newValue){
        ko.utils.arrayForEach(self.children(), function(child) {
           alert(child.id);
        });
        console.log(newValue);
    });

    self.children = ko.observableArray();

    self.loadChildren = function () {
       // standard code to load the children ("lazy load", as I have gobs of data)
    }
}

function Child(id, translation, cultureCode) {
    var self = this;

    self.id = id;
    self.cultureCode = cultureCode;
    self.translation= ko.observable(translation);
}


var vm = function() {
    var self = this;
    self.parent = new ParentObject(1,10);
    self.parent.children.push(new Child(1,"A","1A"));
    self.parent.children.push(new Child(2,"B","2B"));
    self.parent.children.push(new Child(3,"C","3C"));
}

var viewModel = new vm();

ko.applyBindings(viewModel);

​ 您可以使用 subscribe 函数来监听可观察到的变化:

 self.defaultValue.subscribe(function(newValue){
        ko.utils.arrayForEach(self.children(), function(child) {
           alert(child.id);
        });
        console.log(newValue);
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Knockoutjs 当父级可观察到的更改时更新子级 的相关文章

随机推荐

  • 专门化类模板构造函数

    我正在搞乱模板专门化 并且在尝试根据所使用的策略专门化构造函数时遇到了问题 这是我试图开始工作的代码 include
  • 从 lapply 返回匿名函数 - 出了什么问题?

    当尝试使用创建类似函数的列表时lapply 我发现列表中的所有函数都是相同的 并且等于最终元素应该是什么 考虑以下 pow lt function x y x y pl lt lapply 1 3 function y function x
  • 无法将 HTTPS 与 ServerXMLHTTP 对象一起使用

    我支持通过 HTTPS 连接到支付网关的经典 ASP 应用程序 直到最近还没有出现任何问题 几天前 最新的更新安装在服务器 Windows Server 2003 上并导致网站崩溃 下面是一个代码片段 Dim oHttp Dim strRe
  • lucene.net 排序不起作用访问冲突

    我正在尝试在 lucene 中对结果进行排序 但是我不断收到此错误 Search dll 中发生 System AccessViolationException 类型的未处理异常 附加信息 尝试读取或写入受保护的内存 这通常表明其他内存已损
  • 为什么小数相加不正确?

    我正在开发一个程序 您可以选择最多 3 件您想要分配积分的事情 举例来说 某项操作可让您获得 4 分 这 4 分将分配到您选择的 3 件事中 在本例中 这 3 件事各得 1 33333 分 在我的数据库中 它们存储为 1 33 然而当我把它
  • 如何在 Windows 上安装 pywebkitgtk?

    如何在 Windows 上安装 pywebkitgtk Windows 7的 我看过这个问题的答案 Windows 上的 Python webkit gtk https stackoverflow com questions 3949060
  • 整理一行中的多个对象

    我有一行来自数据库 select John Name Male Gender 20 Age Rex PetName Male PetGender 5 PetAge many more 使用 Dapper 我想将此行拉入两个对象 class
  • 核心数据迁移——如何将两个实体合二为一

    我有一个包含两个实体的旧核心数据模型 第一个实体 FirstString 有一个属性 string1 它是 NSString 第二实体 SecondString 有一个属性 string2 它是 NSString 它们具有一对多关系 第一个
  • SymPy 和复数的平方根

    使用时solve为了计算二次方程的根 SymPy 返回可以简化的表达式 但我无法让它简化它们 一个最小的例子如下所示 from sympy import sqrt 24 70 I 在这里 SymPy 只是返回sqrt 24 70 I 而 M
  • 如何动态更改悬停和按下的 extjs 按钮的背景

    你好 我需要能够动态更改按钮不同状态 正常 悬停 按下 的背景颜色 到目前为止我想到的如下 http jsfiddle net suamikim c3eHh http jsfiddle net suamikim c3eHh Ext onRe
  • 为什么方法参数不适用于赋值?

    在 Ruby 中 与许多语言一样 方法的参数不会自动分配为实例变量 这有效 def initialize a a a end 这不会 def initialize a end 例如 在 CoffeeScript 中 这是有效的 constr
  • 升级到 .net 4 时 MembershipUser / System.Web.ApplicationServices 出现问题

    我有一个大型 vb net Web 项目 我正在尝试将其升级到 net4 VS2010 在编译期间我收到以下错误 程序集 System Web Version 4 0 0 0 Culture neutral PublicKeyToken b
  • 如何在没有gradle或Maven或Eclipse的情况下将jar文件添加到java项目中

    我可以添加一个jar文件到我在桌面上手动创建的 Java 项目without使用 gradle Maven 或任何依赖管理工具或任何 Java IDE 目前该项目是一个包含 5 个 java 文件的文件夹 我从终端运行它 是否可以在此类项目
  • 如何使用 BigQuery DML 转换嵌套在数组、结构体、数组内的结构体的某些字段?

    我认为这是问题的一个更复杂的版本更新 BigQuery 中结构体数组中的值 https stackoverflow com questions 61408952 update values in struct arrays in bigqu
  • MySQL 中 int 转字符串

    可以做这样的事情吗 本质上 我想将一个 int 转换为一个字符串 并在连接上使用该字符串 注意 t1 id select t2 from t1 join t2 on t2 url site com path t1 id more where
  • Mule 方法无法转换为字符串

    我对骡子工作室很陌生 这是环境设置 VM1 Windows 7 Visual Studio 2012 IIS 7 IIS 7 中托管的 net 4 5 WCF Web 服务 具有接受字符串并返回字符串的操作 VM2 Ubuntu 13 4
  • Titanium 用于 Windows 平台上的 iOS 开发

    我已经下载了 Windows 平台的 Titanium 正确安装后 我发现它需要iOS SDK 那么我应该从哪里获取iOS SDK 在Windows平台上可以开发iOS吗 使我的 Hello World 示例在适用于 iOS 的 Windo
  • 错误:R 中的下标类型“列表”无效

    这里有一个问题 我正在使用 eclipse 参数创建一个函数来处理不同的函数参数 我重新创建了类似的情况来显示我不断遇到的问题 gt d lt data frame alpha 1 3 beta 4 6 gamma 7 9 gt d alp
  • where 和having 关于别名的区别

    如果我在中创建一个别名select那么我不能在where子句因为根据sql查询的执行顺序where出现在之前select 但我可以在中创建一个别名select子句并将其用于having虽然条款having出现在之前select 为什么会这样
  • Knockoutjs 当父级可观察到的更改时更新子级

    当使用 KnockoutJs 父可观察更改时 如何触发子元素的更新 在我的应用程序中 我正在构建一个翻译工具 我有一个淘汰赛类 表示某些文本的原始 默认 值 以及翻译后的子项的集合 function ParentObject id defa