0

我在将敲除绑定到可折叠面板（用于移动设备）时遇到一些问题，希望有人能提供帮助。

这是我要完成的工作：

  1. 我有一个带有摘要和动态创建面板的表单。在这些面板上，标题绑定到分支名称。内容包含摘要信息。

  2. 在每个 [Branch Name] 标题中，我想添加一个“编辑”按钮（在右侧），单击该按钮时，a）将自身替换为“保存”和“取消”按钮广告 b）隐藏所有其他“其余部分中的“编辑”按钮。当调用 Save 或 Cancel 操作时，所有 Edit 按钮再次可见。

  3. 在编辑模式下，我希望将标签替换为输入字段

当然，我假设所有这些都需要自定义 [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：这是一个 Fiddle 示例（http://jsfiddle.net/sal_andani/pvsky/）

4

1 回答 1

0

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

对于可编辑记录，在这种情况下是一个分支，在声明模型时（比如通过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()" />

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

于 2013-06-04T15:10:47.697 回答