某些东西的 knockoutjs 数据绑定尚不存在答案

【问题标题】：knockoutjs data bind of something doesn't exist yet某些东西的 knockoutjs 数据绑定尚不存在
【发布时间】：2013-09-12 11:27:39
【问题描述】：

假设我有一个项目列表，数据是通过映射插件创建的，列表为空是正常的。我想要一个执行编辑和创建操作的表单，它应该绑定到单个选定的项目。

<div id="appointment-modal" class="reveal-modal" data-bind="with: appointment">
    <form id="appointment-form" data-bind="submit: submit_appointment">
        <input type="text" name="name" data-bind="value: name"/>
        <textarea name="description" data-bind="value: description"></textarea>
        <input type="text" name="time" data-bind="value time" />
        <input type="text" name="address1" data-bind="value: address1"/>
        <input type="text" name="address2" data-bind="value: address2"/>
        <input type="text" name="phone" data-bind="value: phone"/>
        <input type="text" name="email" data-bind="value: email"/>
    </form>
</div>

问题是，我收到错误抱怨约会未定义：

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: with: appointment
Message: appointment is not defined

我也许可以使用“if”绑定来检查appointment 是否存在，但我不知道如何满足创建，理想情况下我想重用相同的表单。

遇到了这个link，我可以创建一个虚拟的可观察“约会”，但是由于约会是虚拟的，所以 div 什么也不渲染，这特别不适合创建新的约会项目。

【问题讨论】：

标签： knockout.js

【解决方案1】：

是的，您需要定义属性，即使它为空（fiddle - 这就是您所遇到的）。正如您所发现的，您只需要使用 null 值（observables 的默认值）定义属性，然后稍后将约会对象添加到它（fiddle）。这是完全可以接受的。

function ViewModel() {
    var self = this;
    self.appointment = ko.observable();// Don't set any value
}

这是进行“后期绑定”的一种方法。如果稍后，您向 DOM 添加一些新的 html，您可以调用 ko.applyBindingsToDescendants(myViewModel, $("#parentDiv")[0])。但在您的特定情况下，我可能会提前定义 self.appointment 属性。

更新：

创建一个定义了所有属性的对象并像这样绑定它：fiddle。然后在提交时清除所有字段。

【讨论】：

嗨，我真的厌倦了这个，但我的表单没有呈现任何内容，因为约会为空。
你到底在追求什么？您的问题暗示问题与 appointment 未定义为属性有关，但似乎不再如此。如果appointment 为空，则不应渲染任何内容，这是预期的行为，当您稍后设置它时，KO 将更新 DOM。您希望表单“呈现”但没有填写数据吗？
我所追求的，如问题中所述，希望在创建新约会时显示该表单。
知道了，更新了答案。您需要定义一个空的约会对象并将其绑定到表单。提交后，您进行验证检查，并在成功 PUT 调用服务器后，清除表单（或执行您需要做的任何其他事情）。
感谢您的更新，所以我没有办法避免事先声明模型属性？

【解决方案2】：

我想出了一个解决方法，它不是定义一个 observable，而是定义一个 observableArray()

在模板中，不要像这样绑定 observable：

<div data-bind="with: listing">
  <div data-bind="text: title">
</div>

你像循环数组一样绑定：

<div data-bind="foreach: listing">
  <div data-bind="text: title">
</div>

因此模板不会抱怨尚未映射字段。

要将列表填充到模板中，就像使用映射插件一样：

vmodel.listing.removeAll();
vmodel.listing.push(ko.mapping.fromJS(listing_json));

【讨论】：