Question

我有一个表，通过Knockout js数据绑定。在每一行上都有一个链接，我希望显示一个模态对话框，其中包含的输入字段也将与我的视图模型绑定。

这是我的服务器端视图模型

public class ViewModel
{
    ...//String getters/setters
     public IList<SubViewModel> SubViewModels{get;set;} // contains a couple of String properties
     ...
}

然后我在客户端成功地序列化它并绑定到表。每个表行都有一个链接：

<script type="text/html" id="myRowTemplate">
    <tr>
    <td><a href="#" data-bind="click: function(){ myModel.doStuffInADialog($data) }">Do stuff in a popup</a></td>
... other editable text fields, all playing nicely

正确调用此函数，但我想将当前选定的行数据传递给模板：

var viewModel = {
    ...
    doStuffInADialog: function (selectedRowData) {
        //how to pass this selectedRowData to the template?
        d.dialog({ ... jquery dialog stuff });
        ...

这是我想要使用的模板：

<script type="text/html" id="nestedPropertyTemplate">
    <div class="form-row">
        <div>
            <label>${someFieldOnNestedProperty}</label>
        </div>
        <div class="field">
            <input data-bind="value: Value"/>
        </div>            
    <br />
    </div>
</script>

这是我将用于对话框的div

<div data-bind=" template : { name: 'nestedPropertyTemplate', data : SubViewModels() }" style="display: none" class="dialog">
</div>

所以，总结..我想知道是否有办法/最佳方式：

将模板绑定到我的JSON对象的嵌套属性
使用jQuery对话框显示使用模板的div的内容，并将对话框中的字段数据绑定到我的knockoutjs视图模型
将当前行数据动态注入模板/对话框

Answer 1

如果我已正确理解您的问题，我会在您的视图模型中添加一个属性来存储当前选定的行，例如：

myRows: ko.observableArray(....),
myCurrentlySelectedRow: ko.observable(null)

...然后在您的点击处理程序中设置选定的行：

doStuffInADialog: function (selectedRowData) {   
     myCurrentlySelectedRow(selectedRowData);
     .....
}

最后，将模板绑定到当前选定的行：

<div data-bind=" template : { name: 'nestedPropertyTemplate', data : viewModel.myCurrentlySelectedRow() }"

这样，只要您选择的行更改满足“将当前行数据动态注入模板/对话框”的要求，您的模板就会触发并重新呈现内容

动态数据绑定到knockout js中的嵌套属性 - 带对话框（asp.net mvc 3）

1 个答案: