2012-09-26 42 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'的好时机 –