0

我有一个带有 knockout.js 模型的页面。我通过绑定序列化对象的计算属性将数据“序列化”到 JSON 格式的文本框。

工作部件的选择：

查看模型

function CourseParticipant(name, facility) {
    var self = this;
    self.name = ko.observable(name);
    self.facility = ko.observable(facility);
}

function CourseParticipantViewModel() {
    var self = this;

    self.participants = ko.observableArray();
    self.participants.push(new CourseParticipant("Greg", "init"));

    self.addParticipant = function(participant) {
        self.participants.push(new CourseParticipant("", ""));
    }

    self.removeParticipant = function(participant) {
        self.participants.remove(participant);
    }

    self.serializedValue = ko.computed(function() {
        return ko.toJSON(self.participants(), null, null);
    }, self);
}

ko.applyBindings(new CourseParticipantViewModel());


$("#btn").click(function(){
    $(".fac").val('val');
})

HTML

<table class='pc-tbl'>
<tbody data-bind="foreach: participants">

  <tr><td colspan='100%'>
      <a href="#" data-bind="click: $root.removeParticipant">x</a></td></tr>
  <tr>
       <th>Name:</th>
       <td><input data-bind="value: name" /></td>
  </tr>
  <tr>
    <th>Facility:</th>
    <td><input data-bind="value: facility" class='fac' /></td>
  </tr>
</tbody>
</table>
<br />
<textarea data-bind="value: serializedValue()" style='width:300px; height:100px;'></textarea>
<a href="#" data-bind="click: addParticipant">Add Participant</a>

<input type=button id='btn' value='test'  />

我遇到问题的部分是让 Knockout 在通过 JavaScript 编辑表单时检测到更改。可以在此处找到该问题的示例：http: //jsfiddle.net/oglester/tQzu2/

问题是当您单击测试按钮并更新表单时，模型不会更新。如何强制表单通知视图模型？

4

2 回答 2

3

反过来做：http: //jsfiddle.net/tQzu2/1/

Knockout 根据其模型更新 UI，即您将元素绑定到模型，反之亦然。

于 2012-09-26T14:18:00.607 回答
1

这可能是因为通过val()方法更改输入值不会触发change事件。更改输入值后尝试change手动触发事件

$("#btn").click(function(){
    $(".fac").val('val');
    $(".fac").trigger('change');
})

但是，如果绑定触发器设置为“更改”以外的其他值，这可能不起作用。

示例：http: //jsfiddle.net/zSmSY/

于 2012-09-26T14:21:32.957 回答