Question

我正在尝试使用拼接编辑记录后更新表，但我收到如下错误。性别是一个单选按钮。我甚至试图删除它，下一个字段显示错误。我在这里做错了什么？

未捕获的ReferenceError：无法解析绑定。绑定值：文本：性别消息：未定义性别

我看了一篇类似的帖子Splicing new array of items onto existing Knockout observable array causes binding errors，但它似乎对我不起作用。

查看模型

var vmSearchResultsModel = function () 
{
    var self = this;
    self.SearchResults = ko.observableArray([]);  //Holds the results of the search
}

返回可观察数组的数据

"SearchResults": [
{
  "id": 3,
  "name": "Adrian D'Costa",
  "dob": "/Date(-37776600000)/",
  "gender": "M",
  "joindate": "/Date(-37776600000)/"  //<-- this is another issue I need to fix
},
{

  "id": 14,
  "name": "Janet D'Curz",
  "dob": "/Date(-37776600000)/",
  "gender": "F",
  "joindate": "/Date(-37776600000)/"

}
]

拼接

var getjsondata = ko.toJSON(self.SearchResults, ['name', 'gender', 'dob', 'joindate']) // select only what is required to show
console.log(getjsondata);
var obj = JSON.parse(getjsondata);  // convert JSON to JS string
alert(obj[0].gender); //M Male, F Female
self.SearchResults.splice(self.CurrentIndex, 1, obj);  // updates the row that was edited  <-- shows an error here

编辑时单选按钮绑定

<td> Gender </td>
    <td>
        <input type="radio" id="rdMale" name="Gender" value='M'  data-bind="checked: $root.gender" />   
        <input type="radio" id="rdFemale" name="Gender" value='F' data-bind="checked: $root.gender" />
    </td>

编辑1 下面的模板显示了我根据DOB，JoinDate ...

搜索某些数据的时间

<script type="text/html" id="TmplSearchResults">  
    <tr style="border-bottom: 1px solid #CCC;">
        <td valign="middle" data-bind="text: name"></td>
        <td valign="middle" align="center" data-bind="text: gender"></td>
        <!-- ko if: ($root.SearchByVal() ==="DOB") -->
              <td valign="middle" data-bind="textualDate: dob"></td> 
       <!-- /ko -->

        <!-- ko if: ($root.SearchByVal()==="Join Date") -->
              <td valign="middle" data-bind="textualDate: joindate"></td> 
       <!-- /ko -->
        <td valign="middle" > <img type="image" title="edit" src="images/edit1.png"  data-bind="event:{ click: $root.EditEmpDetails.bind($data, $index())}" /></td>
    </tr>        
</script>

编辑2

我改变了这样的代码

self.SearchResults().splice(self.CurrentIndex, 1, obj);

现在未捕获的ReferenceError：无法解析绑定。绑定值：文本：性别消息：未定义性别错误未显示但行未随更改而更新。我哪里错了？

编辑3

Jfiddle http://jsfiddle.net/7LYad/1/

更新

这个小提琴是一个没有任何错误的小提琴，但拼接没有发生，也没有观察到更新。哪里错了。我应该有两个视图模型，一个用于显示网格，一个用于保存，还有一个用于编辑，保存和拼接？

http://jsfiddle.net/7LYad/2/

Answer 1

您的问题与拼接无关：$root.gender告诉Knockout查找名为gender的属性，该属性是ViewModel的属性（即您在ko.applyBindings中指定的内容）本身; $root限定符始终引用VM的顶级。很明显，你的VM上没有这样的属性;相反，它是SearchResults中对象的属性。

如果您的问题HTML包含在foreach: SearchResults绑定的内容中（或者它位于使用foreach或data选项调用的模板中），那么只需删除限定符即可写“性别”。

FIDDLE之后更新

1）您永远不会将主视图模型中的EditEmployee设置为真值，因此编辑员工的字段将永远不会显示。

2）在SaveEmpDetails中，您试图将对象的JSON字符串表示而不是对象本身拼接到SearchResults。

Answer 2

http://jsfiddle.net/7LYad/5/

当您拼接Knockout observableArray时，您不希望拼接数组的值，而是希望拼接底层数组本身。在尝试更改值时，请确保不要“获取”observableArray的值，除非您打算将其设置为等于其他值 -

self.SearchResults.splice(self.CurrentIndex, 1, getjsondata);

其他可能的方式 -

self.otherArray = self.SearchResults().splice(self.CurrentIndex, 1, getjsondata);

拼接更新KO Observable数组会显示错误

2 个答案: