为什么我的 Knockout Mapping 会杀死我的 $.change 函数？

Question

我有以下可以在 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>

但是当我尝试通过执行以下操作来实现映射时，我的 $('.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>

Answer 1

很难准确说出问题所在，也许 JSFiddle 会有所帮助？在您绑定之前似乎没有填充 Outing，所以在您调用 applyBindings 时，Outing().OutingName 未定义，您是否在控制台中收到任何 js 错误？

顺便说一句，淘汰值绑定在内部使用更改事件来更新其可观察对象。因此在大多数情况下没有必要使用 Jquery 更改事件。既然您已经绑定到 OutingName 的值，为什么不在 outingDataViewModel 中用 this 替换您的 change() 方法。

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

编辑

这是一个有效的简化版本。我注意到您的 updateOuting 方法在访问它的名称之前没有调用 Outing 可观察对象。这通常会导致错误。我没有包含信号 R 的东西，因为我以前从未使用过它。

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

希望这会有所帮助，