0

MVC4 アプリケーションで正常に動作する次の Javascript および Html コードがあります。

@model string
<script src="@this.Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"> </script>
<script src="@this.Url.Content("~/Scripts/jquery.signalR.js")" type="text/javascript"> </script>
<script src="@this.Url.Content("~/Scripts/knockout.js")" type="text/javascript"> </script>
<script src="@this.Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"> </script>
<script type="text/javascript" src="/signalr/hubs"> </script>
<script type="text/javascript">
    $(function() {
        function outingDataViewModel() {
            var self = this;
            self.hub = $.connection.outings;
            self.ID = ko.observable();
            self.OutingNumber = ko.observable();
            self.OutingName = ko.observable();
            //Initializes the view model
            self.init = function () {
                self.hub.getOuting('@this.Model');
            };
            self.hub.updateOuting = function (data) {                    
                self.ID(data.ID);
                self.OutingName(data.OutingName);
                self.OutingNumber(data.OutingNumber);
            };

            self.updateOuting = function () {
                var outing = { "ID": self.ID(), "OutingNumber": self.OutingNumber(), "OutingName": self.OutingName() };
                self.hub.saveOuting(outing);
            };
        }

        var vm = new outingDataViewModel();
        ko.applyBindings(vm);
        // Start the connection
        $.connection.hub.start(function () { vm.init(); });
        $('.data').change(function () { vm.updateOuting();} );
    });
</script>

<div  id="OutingSummary">
    <div data-bind="text:OutingNumber"></div>
    <input data-bind="value:OutingName" class="data"/>
</div>

しかし、次の my $('.data').change(function () { vm.updateOuting();} ); を実行してマッピングを実装しようとすると、呼び出されることはありません。Chrome 開発者ツールはエラーをキャッチしていないようで、途方に暮れています。情報は html にバインドされます。テキスト ボックスからタブで移動すると、何も起動しません。(以前と同じスクリプト参照)

    $(function() {
            function outingDataViewModel() {
                var self = this;
                self.hub = $.connection.outings;
                self.Outing = ko.observable();
                //Initializes the view model
                self.init = function () {
                    self.hub.getOuting('@this.Model');
                };
                self.hub.updateOuting = function (data) {
                    self.Outing(ko.mapping.fromJS(data));
                };

                self.updateOuting = function () {
                    var outing = { "ID": self.Outing.ID(), "OutingNumber": self.Outing.OutingNumber(), "OutingName": self.Outing.OutingName() };
                    self.hub.saveOuting(outing);
                };
            }

            var vm = new outingDataViewModel();
            ko.applyBindings(vm);
            // Start the connection
            $.connection.hub.start(function () { vm.init(); });
            $('.data').change(function () { vm.updateOuting();} );
        });
    </script>

    <div data-bind="with:Outing" id="OutingSummary">
        <div data-bind="text:OutingNumber"></div>
        <input data-bind="value:OutingName" class="data"/>
    </div>
4

1 に答える 1

1

問題が何であるかを正確に伝えるのは難しいですが、おそらく JSFiddle が役立つでしょうか? バインドする前に Outing にデータが取り込まれていないように見えるので、applyBindings を呼び出した時点で、Outing().OutingName は未定義です。コンソールに js エラーが表示されていますか?

余談ですが、ノックアウト値バインディングは内部で変更イベントを使用してオブザーバブルを更新します。したがって、ほとんどの場合、Jquery 変更イベントを使用する必要はありません。すでに OutingName に値をバインドしているため、outingDataViewModel 内で change() メソッドをこれに置き換えてみませんか。

self.Outing().OutingName.subscribe(function() { 
    self.updateOuting();
});

編集

これは機能する簡易版です。名前にアクセスする前に、あなたの updateOuting メソッドが Outing オブザーバブルを呼び出していないことに気付きました。通常、これによりエラーが発生します。以前に使用したことがないため、シグナル R のものは含めませんでした。

http://jsfiddle.net/madcapnmckay/gDu94/

お役に立てれば、

于 2012-03-01T17:54:20.910 に答える