Question

我遇到了一些针对可折叠面板（针对移动设备）的敲除绑定的问题，我希望有人可以提供帮助。

这就是我想要完成的事情：

我有一个包含摘要的表单，以及动态创建的面板。在这些面板上，标题绑定到分支名称。内容包含摘要信息。
在每个[分支名称]标题中，我想添加一个“编辑”按钮（在右侧），点击该按钮后，a）用“保存”和“取消”按钮替换自己b）隐藏其余部分中的所有其他“编辑”按钮。调用“保存”或“取消”操作时，“所有编辑”按钮再次可见。
在编辑模式下，我希望用输入字段替换标签

当然我假设所有这些都需要自定义[ko]绑定 - 但我似乎无法弄明白。

提前致谢！

<div data-role="collapsible" data-collapsed="false" data-mini="true" data-theme="a" data-inset="false" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-enhance="true">
<h4><span data-bind="text: Name"></span>
    This is where I'd like the EDIT, SAVE and CANCEL buttons
</h4>

<div class="ui-grid-a">
    <div class="ui-block-a">Bulk Interest</div>
    <div class="ui-block-b"><span data-bind="text: Interest"></span>
    </div>
    <div class="ui-block-a">Adjustments</div>
    <div class="ui-block-b"> <span data-bind="text: Adjustments"></span>
    </div>
    <div class="ui-block-a">Current</div>
    <div class="ui-block-b"><span data-bind="text: Current"></span>
    </div>
</div>

PS：这是一个示例小提琴（http://jsfiddle.net/sal_andani/pvsky/）

Answer 1

我通常处理此问题的方式如下：

对于可编辑记录，在本例中为分支，在声明模型时（例如通过new BranchModel()构造函数），我在模型上创建一个默认为false的编辑属性。然后我可以添加带功能的按钮：

<input type="button" data-bind="click: edit, visible: !editing()">edit</input>
<input type="button" data-bind="click: delete, visible: !editing()">delete</input>
<input type="button" data-bind="click: save, visible: editing()">save</input>
<input type="button" data-bind="click: cancel, visible: editing()">cancel</input>

使用模型上的编辑和取消功能：

this.edit = function() { this.oldModel = this.get(); this.editing = true; }
this.cancel = function() { this.set(this.oldModel); this.editing = false; }

最后，在表单本身中，我可以使用与按钮相同的技巧：

<span class="field">Field</span>
<span class="value" data-bind="text: value, visible: !editing()"></span>
<input class="value" data-bind="value: value, visible: editing()" />

因此，我们有一个用于查看和编辑模型的基本系统。您的问题有很多，但我希望这可以为您提供一个如何处理一些更一般情况的良好指导（例如，当处于编辑模式时禁用所有模型上的编辑）。

淘汰jquerymobile可折叠面板与编辑和取消/保存

1 个答案: