Jquery 如何使用knockout.js将数据绑定到html控件asp.net mvc razor？

嗨；我尝试使用asp.net mvc razor学习knockout.js。我已经在下面写了一些代码，但是http://localhost:56238/Contact/SendMessage 是空的。我只看到html控件。如何使用knockout.js将ViewModel绑定到UI

@{
    ViewBag.Title = "SendMessage";
}

<h2>SendMessage</h2>

<script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">


    $(document).ready(function () {


        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");

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

            this.capitalizeLastName = function () {
                var currentVal = this.lastName();        // Read the current value
                this.lastName(currentVal.toUpperCase()); // Write back a modified value
            };


            $(document).ready(function () { ko.applyBindings(new AppViewModel()); })
        }



    });
</script>

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<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>

<button data-bind="click: capitalizeLastName">Go caps</button>

@{
ViewBag.Title=“SendMessage”；
}
发送消息
$（文档）.ready（函数（）{
函数AppViewModel（）{
this.firstName=ko.可观察（“伯特”）；
this.lastName=ko.observable（“伯丁顿”）；
this.fullName=ko.computed（函数（）{
返回此.firstName（）+“”+此.lastName（）；
}，这个）；
this.capitalLastName=函数（）{
var currentVal=this.lastName（）；//读取当前值
this.lastName（currentVal.toUpperCase（））；//写回修改后的值
};
$（document）.ready（函数（）{ko.applyBindings（新的AppViewModel（））；}）
}
});
名字：

姓氏：

名字：

姓氏：

全名：

盖帽

ko.applyBindings从未在代码中执行，必须将其放置在ViewModel之外的某个位置。计算中的“this”不起作用，因为它不指向视图模型

应该是这样的：

<script type="text/javascript">
    function AppViewModel() {
            var self = this;

            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");

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

            this.capitalizeLastName = function () {
                var currentVal = this.lastName();        // Read the current value
                this.lastName(currentVal.toUpperCase()); // Write back a modified value
            };
        }

    $(document).ready(function () {
        ko.applyBindings(new AppViewModel()); 
    });
</script>

函数AppViewModel（）{
var self=这个；
this.firstName=ko.可观察（“伯特”）；
this.lastName=ko.observable（“伯丁顿”）；
this.fullName=ko.computed（函数（）{
返回self.firstName（）+“”+self.lastName（）；
}，这个）；
this.capitalLastName=函数（）{
var currentVal=this.lastName（）；//读取当前值
this.lastName（currentVal.toUpperCase（））；//写回修改后的值
};
}
$（文档）.ready（函数（）{
应用绑定（新的AppViewModel（））；
});

---

还有一件事，我看到您在使用jquery时没有包含jquery库

您在内部

$（document）.ready中调用
ko.applyBindings
，但是您已经在ready事件中了。只需编写
ko.applyBindings（新的AppViewModel（））并且应该可以正常工作。