首页 文章

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

提问于
浏览 次
2

我有一个表，通过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>            
    

    </div>
</script>

这是我将用于对话的div

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

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

  • 将模板绑定到我的JSON对象的嵌套属性

  • 使用jQuery对话框显示使用模板的div的内容，并将对话框中的字段数据绑定到我的knockoutjs视图模型

  • 将当前行数据动态注入模板/对话框

jquery asp.net-mvc asp.net-mvc-3 knockout.js

1 回答

  • 6

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

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

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

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

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

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

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

    回复于

相关问题