(KnockoutJS)从选定的表格行

时间:2017-06-01 16:32:09

标签: knockout.js

我有一张由KnockoutJS填充的表格。 HTML代码看起来像

<table>
    <thead>
        <tr>
            <th class="col_name">Name</th>
            <th class="col_dob">DOB</th>
            <th class="col_address">Address</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr data-bind="attr: { id: resource.id}, 
                       css: {'isSelected':$root.selRow() == $data}, 
                       click: $parent.highlightRow.bind($parent), 
                       event : { dblclick: $parent.processRow.bind($parent) }">
            <td class="col_name" data-bind="text: resource.name"></td>
            <td class="col_dob" data-bind="text: resource.birthDate"></td>
            <td class="col_address" data-bind="text: resource.address"></td>
        </tr>
    </tbody>
</table>

我只需单击一下就可以突出显示,双击时执行和事件,但是当我尝试从所选行获取数据时,我只获得没有数据的选定DOM信息。

该部分的KnockoutJS代码如下:

this.selectedRow = ko.observable(null);

this.processRow = function(item)
{
        var self = this;
        self.selectedRow(item);

        console.log("Selected data to process: " + JSON.stringify(self.selectedRow(item))); 

}

如何从所选行获取数据呢?在这种情况下,我是否应该bind使用$parent?如果是这样,我怎么知道选择了哪一行?

1 个答案:

答案 0 :(得分:1)

您的项目数据正在正确传递到函数中,但您正在向控制台输出设置操作的结果,该操作为空白。您已经设置了selectedRow的值,因此无需再次设置它。 console.log行应该读取值而不是设置它。

function viewModel (){
  this.selectedRow = ko.observable(null);
  this.rows = ko.observableArray([
  {resource: new resource()}, {resource: new resource()}, {resource: new resource()}]);

  this.processRow = function(item)
  {
    var self = this;
    self.selectedRow(item);

    console.log("Selected data to process: " + JSON.stringify(self.selectedRow())); 
  }
  
}

function resource(){
  this.name = 'resource name';
  this.birthDate = '1/1/1900';
  this.address = '123 address ln.'
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<table>
    <thead>
        <tr>
            <th class="col_name">Name</th>
            <th class="col_dob">DOB</th>
            <th class="col_address">Address</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr data-bind="event : { dblclick: $parent.processRow.bind($parent) }">
            <td class="col_name" data-bind="text: resource.name"></td>
            <td class="col_dob" data-bind="text: resource.birthDate"></td>
            <td class="col_address" data-bind="text: resource.address"></td>
        </tr>
    </tbody>
</table>
var textView1 = UITextView()
override func viewDidLoad() {
    super.viewDidLoad()
    textView1 = UITextView(frame: CGRect(x:24,y: 100,width: 340,height: 290))
    textView1.delegate = self

    textView1.textColor = UIColor.black
    textView1.backgroundColor = UIColor(red: 0.00, green: 0.00, blue: 0.00, alpha: 0.00)
    textView1.text = "textView 1"
    view.addSubview(textView1)
}

func textViewDidBeginEditing(_ textView: UITextView) {
    print("print1")
}

func textViewDidEndEditing(_ textView: UITextView) { 
    print("print2")
}