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

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

Answer 2

使用＆＃34;空白＆＃34; selected变量中的项目充当您的＆＃34;新项目＆＃34;。然后，填写表格以添加项目将填写＆＃34;空白＆＃34;项目

以下是一些代码段（部分基于您的代码和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: "" });
}

然后，＆＃34;添加＆＃34;用于将新项目放入数据数组的按钮可以包含：

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

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

我添加了一个取消按钮并单击它：

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

这也清除了selected observable。

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

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

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

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

3 个答案: