0

やあ; 私はasp.netmvcrazorを使用して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>
4

1 に答える 1

2

ko.applyBindingsはコードで実行されないため、ViewModelの外部に配置する必要があります。計算された「これ」は、ビューモデルを指していないため、機能しません。

次のようになります。

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

もう1つ、jquerylibを含めずにjqueryを使用しているようです。

于 2013-01-19T14:52:10.727 に答える