2012-09-26 75 views
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' /> 

我有越來越淘汰賽來檢測故障的部分表單是edi時的變化通過JavaScript特德。可以在這裏找到問題的示例: http://jsfiddle.net/oglester/tQzu2/

問題是,當您單擊測試按鈕並更新窗體時,模型不會更新。如何強制表單通知視圖模型?

回答

1

這可能是因爲通過val()方法更改輸入值不會觸發change事件。嘗試改變輸入值

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

後手動觸發change事件但如果結合觸發設置爲「改變」等價值,這可能無法正常工作。

實施例:(「 FAC」)。http://jsfiddle.net/zSmSY/

3

做它周圍的其他方法:http://jsfiddle.net/tQzu2/1/

淘汰賽更新基於其模型你的元素結合到模型中,而不是相反的UI,即。

+0

予想到的是,但在實際代碼我被假冒文本框作爲參考,以功能類似'$點擊(函數(){FUNC(本) ;})'。但是,一個很好的答案。 –

+0

那麼現在是使用'ko.dataFor'的好時機 –