无法在模板中调用ko.protectedObservable上的函数

时间:2013-06-13 20:40:49

标签: knockout.js

我已在http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html中详细说明了ko.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>

这是很多重复的代码,所以我想将撤消按钮移动到模板中。 (我无法一起制作字段和按钮的模板,因为CategorySpeaker值来自<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在模板中使用之前会被计算为字符串 - 显然,普通字符串没有{{1方法。

有没有办法将protectedObservable对象绑定到模板,以便可以从模板内部调用其reset方法?

1 个答案:

答案 0 :(得分: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包装到一个对象中,因此knockout不会自动解包该值。

<!-- 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>