初始表单显示的自定义绑定

Question

我有一个 ViewModel，它接受 JSON 来构建 observableArray()，还有一个 selected observable 用于在编辑时存储对象。

var ViewModel = function (data) {
            var self = this;
            self.list = ko.observableArray(data);
            self.selected = ko.observable();
}

我在带有编辑按钮的表格中显示list。编辑时，所选对象进入selected

self.edit = function (o) {
                self.selected = ko.observable(o);
}

接下来，我有一个与selected 绑定并显示所有属性的表单。

<form>
     <input type="text" data-bind="value: selected().Name">
</form>

问题是我希望显示此表单以添加项目，而不仅仅是在用户单击编辑时显示。但最初，selected observable 未定义并引发错误。另外，当用户点击添加按钮时，我想将selected 中的数据推送到我的observableArray。

最好的方法是什么？我可以在哪里放置自定义绑定以使此方案有效？

更新

我的问题与question 类似。 但我无法为observable 实施给定的解决方案

Fiddle 实现部分问题和建议的解决方案

Answer 1

似乎只是简单的 javascript 就是问题的答案。

我添加了一个取消按钮，点击它：

document.getElementById("form").reset();

这也清除了selected observable。

此外，对于初始表单显示，我使用了 $data 和所有属性：

<form data-bind="with: selected" id="form">
     <input type="text" data-bind="value: $data.Name">
</form>

不需要自定义绑定处理程序！！

Answer 2

在selected 变量中使用“空白”项作为您的“新项”。然后，填写添加项的表单将填写“空白”项中的值。

这里有一些 sn-ps（部分基于您的代码和another question）

表格：

<form data-bind="with: selected">
     <input type="text" data-bind="value: Name">
</form>

视图模型

var ViewModel = function (data) {
            var self = this;
            self.list = ko.observableArray(data);
            self.selected = ko.observable(
                { name: "" });
}

然后，用于将新项目放入数据数组的“添加”按钮可以包含以下内容：

// Add this item
self.list.push(self.selected());
// Reset the form to a new blank item
self.selected({ name: "" });

所以当表单被加载时，selected 变量中有一个项目——一个空白项目。

---

为避免创建包含所有字段的新空白模型，您可以使用Ryan Niemeyer's answer here 的变体，对不存在的字段使用valueWithInit 绑定。见他的example jsFiddle。

然后，您可以这样做：

表格：

<form data-bind="with: selected">
     <input type="text" data-bind="valueWithInit: Name">
</form>

视图模型

var ViewModel = function (data) {
            var self = this;
            self.list = ko.observableArray(data);
            self.selected = ko.observable({});
}

Answer 3

<form data-bind="with: selected">
     <input type="text" data-bind="value: Name">
</form>

在选择项目之前，这不会呈现表单的内容

要重用表单，请使用模板绑定

<form data-bind="template: { if: selected, data: selected, name: 'my-template' }">
</form>