关于模态控制的KO.js的数据绑定问题

时间：2014-11-14 14:57:35

标签： knockout.js dotnetnuke

大家好，我正在寻找一些帮助解决这个与knockoutjs有关的数据绑定问题。

这一切都始于ko.applyBindings(viewModel)在一个页面上抛出错误而其他人没有说在同一个元素上调用多个绑定的事情。

查看文档我用ko.applyBindings(viewModel, document.getElementById('ElementId'))代码快速解决了这个问题。

但另一个问题已浮出水面。我在编辑控件上失去了约束力。换句话说，当我点击编辑文本时，我得到一个空白对话框，而不是用对象填充一个？属性。

原始源代码 - https://dnnboards.codeplex.com/
原创现场演示 - http://demo.dnnboards.com/

我能看到的唯一区别是knockoutjs版本。原始演示使用2.1.0，我使用3.1.0，但无论我是否将整个演示html代码包装在div中 <body> <div id="myModule">...</div> <scripts> </body>
并改变 ko.applyBindings(vm);
到
ko.applyBindings(vm, document.getElementById('myModule'));
一切仍然按预期工作。

我无法在jsfiddle工作但你应该能够更好地了解我的情况。
http://jsfiddle.net/iiminov/88rafcfk/

如果有人对如何进行调试提出了很好的建议，我会非常感激。

但我怀疑是这样 <div id="divModal" style="display:none;"> <!-- ko with: selectedCard -->
工作不正常。由于
<!-- ko if: showAddCard --> <a href="#" class="hlCompose" data-bind="click: $root.expandCompose">Add a card</a>
显示在每个列表上添加卡片链接。

更新1：

感谢@PW Kad解决了jsfiddle的问题。但这不是我试图解决的原始问题/问题。

正如我在向ko.applyBindings()添加范围后试图指出的那样，我在对话框中丢失了数据绑定，但能够用multiple bindings on the same element解决错误。 Valid XHTML

Jsfiddles＆＃39;目的是证明我不应该有任何问题。然而，我正在努力弄清楚为什么会这样。

但是我做了一些观察：

  • 淘汰版差异（演示2.1.0 vs我的开发3.1.0）
    • 我不太了解淘汰赛来统治这个，因为即使我把淘汰赛版本提升到3.0.0（最新版本），jsfiddle仍然可以正常工作。
  • 我首先不了解数据绑定在对话框中是如何工作的？
    • 我理解self.selectedCard = ko.observable();声明
    • 我找不到self.selectedCard(cardToEdit);声明
    • 但根据文件<p data-bind="with: coords">
    • 我不应该有类似<div id="divModal" style="display: none;" data-bind="with: selectedCard">的东西（这对我来说不起作用）
  • 相同的原则适用于add a card链接/按钮。
    • 我看不到与with关键字绑定的任何内容。
    • 但是在原始演示中，此链接仅出现在To Do列表中，在我的情况下，它出现在所有列表中。

Valid XHTML

更新1.1

使用with关键字抓取数据绑定位。我发现Note 1: Using “with” without a container element对应于我在html中看到的内容。这让我相信在某个地方javascript并不是一切都好。 <!-- ko with: outboundFlight --> ... <!-- /ko -->

更新1.2

解决add a card链接问题。事实证明我的列表项目将以SortOrder = 0返回，这导致链接显示在每个列表中。

更新1.3

那么，谁会猜到通过修复SortOrder值的问题，这不仅导致add a card链接/按钮显示在每个列表上，它还修复了对话框上数据绑定的问题。 HRM ...

1 个答案:

答案 0 :(得分：0)

你的小提琴非常适合诊断问题 - http://jsfiddle.net/88rafcfk/1/ - 有一个更新的。

看来你的代码工作正常，除了我做的一次更改 - 你有document.GetElementById而不是document.getElementById。

当我改变这一切时，一切正常。

相关问题
最新问题