grails - 不是来自 ViewModel 的绑定(bind)值

Question

我正在尝试逐渐将 KnockoutJS 融入我现有的应用程序中。我的第一个尝试是采用一些现有的小形式，将它们的值推送到模糊服务器，并通过绑定(bind)更新一些元素。

我遇到的问题是，当表单首次显示时，它不是通过挖空填充的。我正在使用表单中已有的数据呈现页面。所以我这样设置我的 knockout :

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>

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

我知道我可以做如下事情:

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

但这需要我将一些 javascript 直接放入 GSP(我使用的是 Grails)而不是外部脚本文件。

Answer 1

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

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

您的 View 模型刚刚变得不可重用。如果您想使用 grails 来填充 View 模型，请在页面上设置一些 javascript 对象，然后将其传递到您的外部 javascript 文件 View 模型定义中，就像这样(不要忘记使您的属性可观察!):

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。但是，还有另一种选择。您可以创建一个绑定(bind)，从元素中收集值并使用它来设置初始可观察值。该绑定(bind)可能如下所示:

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

这里是 a fiddle在行动中演示此方法