Почему мой Knockout Mapping убивает мою функцию $ .change? - PullRequest
Новая
       4

Почему мой Knockout Mapping убивает мою функцию $ .change?

0 голосов
/ 01 марта 2012

У меня есть следующий код 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').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>

1 Ответ

1 голос
/ 01 марта 2012

Трудно сказать точно, в чем проблема, может быть, JSFiddle поможет?Похоже, что Outing не заполняется до того, как вы выполните привязку, поэтому в тот момент, когда вы вызываете applyBindings, Outing (). OutingName не определен, вы получаете какие-либо ошибки js в консоли?Привязка внутренне использует событие изменения для обновления своего наблюдаемого.Поэтому в большинстве случаев нет необходимости использовать события изменения Jquery.Поскольку вы уже привязали значение к OutingName, почему бы не заменить метод change () на этот внутри вашего outingDataViewModel. 

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

EDIT

Вот упрощенная версияработает.Я заметил, что ваш метод updateOuting не вызывал наблюдаемую Outing до обращения к его имени.Это может привести к ошибке, как правило.Я не включил сигнал R, как никогда раньше.

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

Надеюсь, это поможет,

...