敲除数据绑定

时间:2013-03-13 17:29:47

标签: html knockout.js

我有一个关于使用knockout进行数据绑定的问题。

这是问题:我有一个表,我想要做的是当单击表中的一行时,我希望行的值出现在位于表上方的输入文件中。

所以这里'

<tbody data-bind="foreach: customers">
                        <tr data-bind="click: doSomething">     
                            <td data-bind="text: date"></td>
                            <td data-bind="text:staff"></td>
                            <td data-bind="text: ftype"></td>
                            <td data-bind="text: value"></td>
                            <td data-bind="text: message"></td>
                            </td>
                        </tr>
                    </tbody>

在我的viewmodel中,我有以下功能:

doSomething: function(data) { 
        var self = this;      
        self.date(data.date);        
        self.staff(data.staff); 
        self.ftype(data.ftype);
                   self.value(data.value);
                   self.message(data.message);  

    }

这是我得到的错误:

["Unable to parse bindings.↵Message: ReferenceError:… is not defined;↵Bindings value: click: doSomething", "views/myView/index", Object]
   0: "Unable to parse bindings.↵Message: ReferenceError: doSomething is not          defined;↵Bindings value: click: doSomething"
 1: "views/myView/index"
  2: Object
length: 3
 __proto__: Array[0]

如果我需要提供更多详细信息,请与我们联系。我将非常感谢你的帮助!

2 个答案:

答案 0 :(得分:1)

此类事物的一个非常基本的模式是拥有一个项目数组和一个selectedItem observable,您在选择行时会填充这些项目。

然后,您可以使用围绕某个部分的with绑定来创建编辑器。

<table>
    <tbody data-bind="foreach: customers">
        <tr data-bind="click: $root.selectedCustomer">     
            <td data-bind="text: name"></td>
        </tr>
    </tbody>
</table>

<hr/>

<div data-bind="with: selectedCustomer">
    <input data-bind="value: name" />
</div>

示例:http://jsfiddle.net/rniemeyer/Z6VPV/

答案 1 :(得分:0)

您需要将模型绑定到视图

 var currentViewModel = function(){
   this.doSomething = function(data){
      var self = this;      
      self.date(data.date);        
      self.staff(data.staff); 
      self.ftype(data.ftype);
                 self.value(data.value);
                 self.message(data.message);  
  }
var viewModel = new currentViewModel();
ko.applyBindings(viewModel);