使用 Jquery UI Dialog 和 KnockoutJS 呈现第二个表单

Question

我有一个定义好的主要表单，它可以做它需要做的事情......

@{ Html.BeginForm(); }
@Html.ValidationSummary(false)
@Html.AntiForgeryToken()
@Html.EditorFor(model => model)
<h2>Properties</h2>
<hr />
@* I want to put some stuff here... *@
<br class="space" />
<div class="clearfix">>
    <button type="submit" data-bind="click: save">
        Save
    </button>
</div>
@{ Html.EndForm(); }

现在，那么。这个模型（或者 ViewModel，更确切地说）有一个 IList<PropertyViewModel> 附加到它上面。

PropertyViewModel 有自己的一组验证。它们现在非常简单，但以后有可能此设置会有更复杂的用途。

我使用KnockoutJS 来保证我的viewModel 一致性。虽然我认为这是相当无关紧要的。我想在jQuery UI Dialog 中显示第二种形式并返回结果，本质上是......

<script type="text/javascript">
    var viewModel = {
        name: ko.observable(),
        description: ko.observable(),
        properties: ko.observableArray(),

        save: function () {
            alert(ko.toJSON(viewModel));
        },

        includeProperty: function () {
            $("#dialog").dialog({
                width: 500,
                closeText: '',
                resizable: true,
                buttons: {
                    'Submit': function () {
                        $(this).dialog('close');
                        callback( @* I want the new data to get sent back *@ );
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                        return false;
                    }
                }
            });
        }
    };
    function callback(value) {
        alert(ko.toJSON(value)); // (I will push the new property to the viewmodel here)
    }
    ko.applyBindings(viewModel);
</script>

但是，我不确定如何将EditorTemplate 实际放入对话框中，而且我不确定如何从中取回数据。

Answer 1

我不完全理解您的问题，但据我了解，您正在尝试做的是将数据传递给对话框并从对话框中检索数据。如果是这种情况，那么这可能很有用：

http://api.jquery.com/jQuery.data/

下面是详细的使用示例：

Passing data to a jQuery UI Dialog