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");
});

不确定我是否完全遇到了您遇到的问题。如果这对您不起作用，请在评论中提供更多详细信息。

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

1 个答案: