2

我正在尝试将 KnockoutJS 逐渐添加到我现有的应用程序中。我的第一个尝试是采用一些现有的小型表单，并将它们的值推送到模糊的服务器，并通过绑定更新一些元素。

我遇到的问题是，当表单首次显示时，它没有通过剔除填充。我正在使用表单中已有的数据呈现页面。所以我像这样设置我的淘汰赛：

function DomainViewModel() {
  this.name = "";
  this.description = "";
}

ko.applyBindings(new DomainViewModel());

我的表格是这样的：

<input data-bind="value: name" value="${domainInstance.name.encodeAsHTML()}"/>
<textarea data-bind="value: description" >${domainInstance.description.encodeAsHTML()}</textarea>

所以发生的事情是显示我的表单，然后敲除将 ViewModel 中的值应用于表单，这会清除服务器放置在那里的值。我理解为什么会发生这种情况，并且这不是错误。但是，我想知道这里是否还有其他选择。

我知道我可以执行以下操作：

function DomainViewModel() {
  this.name = "${domainInstance.name}";
  this.description = "${domainInstance.name}";
}

但这需要我将一些 javascript 直接放入 GSP（我正在使用 Grails）而不是外部脚本文件中。

4

1 回答 1

5

所以，你有几种方法可以做到这一点。首先，永远不要这样做

function DomainViewModel() {
  this.name = "${domainInstance.name}";
  this.description = "${domainInstance.name}";
}

您的视图模型刚刚变得不可重用。如果您想使用 grails 填充视图模型，请在页面上设置一些 javascript 对象，并将其传递到您的外部 javascript 文件视图模型定义中，如下所示（不要忘记使您的属性可观察！）：

var grailsData = {
    name : "${domainInstance.name}",
    description : "${domainInstance.name}"
};

  ...
function DomainViewModel(data) {
  this.name = ko.observable(data.name);
  this.description = ko.observable(data.description);
}

ko.applyBindings(new DomainViewModel(grailsData);

我会推荐这种方法，因为稍后当您更改数据源时，您不必更改 HTML。但是，还有另一种选择。您可以创建一个从元素中收集值的绑定，并使用它来设置初始可观察值。该绑定可能如下所示：

ko.bindingHandlers.valueWithInit= {
    init: function(element, valueAccessor) {
        valueAccessor()(element.value);
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        element.value = ko.utils.unwrapObservable(value);
    }
};

这是一个演示此方法的小提琴

于 2012-11-01T17:17:17.760 回答