Question

我有以下Javascript和Html代码，可以在MVC4应用程序中正常运行。

@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错误？

另外，敲除值绑定在内部使用change事件来更新其observable。因此，在大多数情况下，不必使用Jquery更改事件。由于您已经绑定到OutingName，为什么不在outingDataViewModel中替换你的change（）方法。

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

修改

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

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

希望这有帮助，

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

1 个答案: