0

我已按照http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.htmlko.protectedObservable中的详细说明实施。

我的 ViewModel 是一个具有一些属性的对象（还有更多，但这些是相关的）：

...
self.Title = ko.protectedObservable();
self.Speaker = ko.protectedObservable();
self.Category = ko.protectedObservable();
...

在我的表单上，我想在每个字段旁边放置一个撤消按钮，它将将该字段的数据恢复为其原始值。这是我想出的：

<input type="text" id="Title" data-bind="value: Title" />
<button class="btn" type="button" data-bind="click: Title.reset" title="Undo Changes"><i class="icon-undo"></i></button>

这是很多重复的代码，所以我想将撤消按钮移动到模板中。（我不能一起制作字段和按钮的模板，因为Category和Speaker值来自<select>具有不同选项的标签，并且Title是一个简单的文本框，所以我想自己制作撤消按钮的模板。）我想我将能够做到这一点：

<script type="text/html" id="ajax-editor-undobutton">
    <button class="btn btn-mini" type="button" data-bind="click: reset" title="Undo Changes"><i class="icon-undo"></i></button>
</script>

然后使用这个绑定：

<!-- ko template: { name: 'ajax-editor-undobutton', data: Title } --><!-- /ko -->

但是，单击处理程序不起作用。我逐步浏览了 Chrome 开发者工具中的代码，发现当模板被调用时，在模板Title中使用它之前，它被评估为一个字符串——显然纯字符串没有protectedObservable方法。

有没有办法将protectedObservable对象绑定到模板，以便可以从模板内部调用其重置方法？

4

1 回答 1

3

你可以做几件事。但主要的是，你不应该data为任何淘汰赛的绑定制作可观察的，它们将被解包。

由于您的模板只需要该reset函数，因此只需将其作为数据传入即可。

<!-- ko template: { 'name': 'ajax-editor-undobutton', 'data': Title.reset } --><!-- /ko -->
<script type="text/html" id="ajax-editor-undobutton">
    <button class="btn btn-mini" type="button" data-bind="click: $data" title="Undo Changes"><i class="icon-undo"></i></button>
</script>

否则，您需要将 observable 包装到一个对象中，这样淘汰赛就不会自动解开该值。

<!-- ko template: { 'name': 'ajax-editor-undobutton', 'data': { 'Value': Title } } --><!-- /ko -->
<script type="text/html" id="ajax-editor-undobutton">
    <button class="btn btn-mini" type="button" data-bind="click: Value.reset" title="Undo Changes"><i class="icon-undo"></i></button>
</script>
于 2013-06-13T23:15:55.197 回答