Question

我有一个带有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/

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

Answer 1

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

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

Answer 2

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

后手动触发change事件

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

但如果绑定触发器设置为“更改”之外的其他值，则可能无效。

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

淘汰赛没有发现变化

2 个答案: