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'  />

私が問題を抱えているのは、フォームがJavaScriptを介して編集されたときにKnockoutに変更を検出させることです。この問題のサンプルはここにあります：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 に答える