如何在 jquery 弹出对话框中应用敲除绑定

Question

我在 cshtml 中有简单的局部视图和简单的视图模型，像这样：

<script type="text/html" id="@WebSite.Models.DialogTemplates.NewUser">
  <div id="change-state">
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <p>Full name: <strong data-bind="text: fullName"></strong></p>
  </div>
</script>

<script type="text/javascript">
    function AppViewModel() {
        this.firstName = ko.observable("");
        this.lastName = ko.observable("");
        this.fullName = ko.computed(function() 
        {
            return this.firstName() + " " + this.lastName();    
        }, this);
    }
    ko.applyBindings(new AppViewModel());
</script>

我像弹出对话框一样显示这个局部视图，但我不知道如何调用 applyBindings。如果我在定义模型之后调用它，那么在创建对话框之前调用 applyBindings 并且不起作用。我也试试这个。 Can you call ko.applyBindings to bind a partial view?

    ko.applyBindings(new AppViewModel(), document.getElementById("change-state"));

Answer 1

这是演示可能解决方案的小提琴： http://jsfiddle.net/tabalinas/LhRuC/

您可以使用 { autoOpen: false } 创建对话框并在需要时显示它。

HTML：

<script type="text/html" id="tmpl">
  <div id="change-state">
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <p>Full name: <strong data-bind="text: fullName"></strong></p>
  </div>
</script>

<div id="popup">
    <div data-bind="template: { name: 'tmpl' }"></div>
</div>

<button id="show">Show</button>

JS：

function AppViewModel() {
    this.firstName = ko.observable("test");
    this.lastName = ko.observable("test");
    this.fullName = ko.computed(function() { 
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new AppViewModel(), $("#popup").get(0));

$("#popup").dialog({ 
    autoOpen: false 
});

$("#show").click(function() {
    $("#popup").dialog("open");
});

不确定我是否完全解决了您面临的问题。 如果这对您不起作用，请在 cmets 中提供更多详细信息。