问题标签 [javascript-databinding]

目前我正在编写一个应用程序，它由数百个在后台异步更新的 JS 对象组成。使用 iframe 创建的多个面板可用于可视化 HTML 中的各种对象。

挑战：一旦对象被更新，显示更新的属性/属性的相应 HTML 元素应该自动更新自身。HTML 元素发生的更改应该/不一定会影响对象！我见过的许多双向数据绑定库都夸大了我的需求。

是否可以使用 Object.observe 编写一些有效的东西？目前我已经尝试了以下方法（有效），但是对于性能来说很糟糕，并且在 HTML 已被删除（面板已关闭或新对象打开）后会不断观察到对象：

主.html：

面板.html

设置“obj.param1 = 0;” 在 main.html 的控制台中将导致所有元素完全按照我需要的方式进行更改。有没有更优雅的方式来实现这一点，尤其是在一直创建和删除元素的情况下？

提前感谢您的评论和想法！

编辑：对于那些遇到类似挑战的人，我最终编写了一个小型库来解决我的大部分问题：github.com/weltwinkel/.b

我正在研究现有的网络表单应用程序。我有强类型数据列表。现在我在 ASP.NET 网页表单页面中有下拉菜单，所以当用户从下拉列表中选择项目时，ajax 调用 WebMethod 将相应地返回学生列表，现在因为我使用的是静态方法，我无法在代码隐藏中绑定数据源所以我需要做的是以 JSON 格式发送数据并与 ASP.NET Webform 网格“StudentFilterList_Grid”绑定。

代码隐藏网络方法

ASP.NET 网格

jQuery Ajax 函数

上面的代码确认我在 json 中获取数据，所以上面的警报确实给了我答案 response.d[0].RelationshipID

我在 js 文件中声明了这样的列表（完整列表包含 6 项，但可以多或少）

在 html 文件中声明的两个模板

和两个控件，我需要显示列表中的数据

我正在尝试在翻转框中显示图像库，并在其旁边的列表视图中显示与每个图像关联的文本描述。由于设计原因，我不能将两者都放在同一个模板中。

我的翻转框工作正常，并显示所有图像，但列表视图不起作用。首先，它仅显示列表中的 3 个描述，并且这 3 个描述显示在带有滚动条的控件中，而不是在用户更改翻转框中的图像时更改。

有人可以帮我解决这个问题吗？

我已经看到了其他线程，但我仍然感到困惑，我想我在这里提出一个不同的案例。

我正在使用显示模式将视图模型对象返回到我的 HTML 文档。因此，我有一个看起来像这样的视图模型对象：

从这里，您可以看到 customProperty 被分配给初始值为 0 的 Knockout 数字 observable。

在包含上述 JavaScript 的 HTML 文档中，我有一个 SPAN 元素，它具有订阅 customProperty observable 的 data-bind 属性，如下所示：

到目前为止，一切都很好。以上工作正常，这意味着每当我更改脚本中 customProperty 的值时，SPAN 中的文本都会立即更新。例如，我可以成功且轻松地使用此表达式将可观察的 customProperty 的值从 0 更改为 10：

我的问题：

1. customProperty请注意，在引用data-bind 属性中的值时，我没有使用括号。为什么不需要括号？

2. 我发现使用括号也可以：

我理解为什么使用括号有效（因为我正在阅读 Knockout observable 的值）。但是为什么不需要括号呢？换句话说，为什么第 1 点中的数据绑定表达式会起作用？

3. 最后，这个任务到底发生了什么？

   var customProperty = ko.numericObservable(0);

最终是否customProperty持有一个指向名为 的函数的指针customProperty()？

聚合物 Iron-ajax 调用以及如何在绑定发生之前修改/过滤响应？

明智的代码是这样的：

因此，当我将 {{carts.value}} 传递给自定义元素<cart-list>时，我需要它来过滤响应中的一些项目，本质上是购物车返回了太多数据，所以我想在我之前过滤掉一些数据将绑定到的购物车传递给<cart-list>.

任何帮助将不胜感激。提前致谢。

我目前有一个在父子关系中与自身相关的模型。我需要能够在页面上以树状结构显示这些（即嵌套<li>项目）。每个<li>项目都将具有一个底层 HTML 结构，该结构具有各种数据绑定和事件处理程序（全部使用Rivets.js实现）。

我最初的想法是使用 Rivets.js 创建一个组件，然后将其嵌套在自身中。但是，我似乎无法理解这些将如何初始化并插入到 DOM 中。

这是我希望能够做到的：

和表示层：

以及业务层：

有没有办法在 RivetsJS 中递归嵌套组件？

更新

我整理了一个 jsfiddle 来说明这一点。我似乎无法在递归期间让数据绑定工作。

https://jsfiddle.net/0mv4r8w0/4/

我的模板中有这一行：

当我运行它时，我收到以下错误：

这是否意味着您不能array.find在绑定中使用？

我知道我的对象有值，并且表达式在监视窗口中计算。有什么建议么？

编辑：虽然这个问题及其答案可以解决这个问题，但我不认为它们是重复的。该问题特定于过滤到较小的列表，也许是一条记录，因为我的问题是每次都获得一条记录。@Thierry-Templier 的答案在这方面看起来不错，我喜欢它使 html 变得多么干净。

1.<%:> and 2.<%= > and 3.<%#> and 4.<%$> and 5.<%! >.

我有 angularjs 相互依赖的下拉菜单，这是一个演示plunker：http ://plnkr.co/edit/mIFCKKO5Azr4ljyoge5r?p=preview 。现在，当我从第一个（国家）下拉列表中选择一个选项时，我希望第二个（州）下拉列表显示为复选框下拉列表，而不是普通下拉列表（如上面的 plunker），并且在从第二个多个下拉列表中选择选项后，我应该再次获得另一个多重下拉菜单。这是一个示例复选框下拉列表fiddle：https://jsfiddle.net/michaeldeongreen/22et6sao/9/需要在我的 plunker 中为州和城市下拉菜单显示此内容。

最后，当我从第一个普通下拉列表中选择一个国家时，应该启用第二个带有用于选择州的复选框的多重下拉菜单，并且在选择一个州后，必须启用另一个用于选择城市的复选框下拉菜单。在我从第一个下拉列表中选择一个选项之前，必须禁用第二个和第三个下拉列表，直到我从第二个下拉列表中选择选项之前，必须禁用第三个下拉列表。

希望有人能帮助我。提前致谢！！

我正在尝试绑定到控制器范围内的布尔变量，以指示是否应显示加载动画。但是，以下代码不起作用。里面的函数$timeout运行了，但是视图没有更新。

当我使用 chrome 角度扩展检查范围时，我看到它ctrl.loading是true.

这是因为布尔值是 javascript 中的值类型，而不是引用类型？

我的猜测是视图实际上是绑定到的true，而不是绑定到会改变的布尔值的位置。

如何让视图绑定到变量，而不是绑定到变量最初的值？

控制器：

模板：

上面的代码只是一个例子，实际上我会在get请求wq返回后设置值。

但效果是一样的。