Knockout.js 클릭 바인딩 이상한 동작

클릭 바인딩이있어, 추가 처리를 위해 자체 함수에 바인딩 컨텍스트 값을 전달해야하며이 값은 성공적으로 전달되었지만 클릭 대신 페이지로드시 함수가 실행됩니다.Knockout.js 클릭 바인딩 이상한 동작

<script src="../Scripts/knockout.mapping-latest.js"></script> 
    <script> 
     function UserStatusViewModel() { 
      var self = this; 
      self.clients = ko.observableArray(); 
      $.getJSON("/api/users", self.clients); 
      self.updatestatus = function() { 
       $.getJSON("/api/users", function (data) { 
        ko.mapping.fromJS(data, {}, self.clients); 
       }); 
      } 
      //Here I'm getting correct data fom click binding context, but this happend on page load, not on click 
      self.modal = function (un) { 
       localStorage.clear(); 
       localStorage.setItem("speakto", un); 
       window.location.replace("http://somehost/operator/dialog"); 
      } 
     }; 
     $(function() { 
      var vm = new UserStatusViewModel(); 
      ko.applyBindings(vm, document.getElementById('users')); 
      var chat = $.connection.chatHub; 
      chat.client.addChatMessage = function (name, message) { 
       vm.updatestatus(); 
      }; 
      chat.client.updateStatus = function() { 
       vm.updatestatus(); 
      } 
      chat.server.userStatus = function() { 
       vm.updatestatus(); 
      } 
      $.connection.hub.start().done(function() { 
      }); 
     }); 
    </script>

그리고 HTML 마크 업 :

<div data-bind="foreach: clients" id="users"> 
    <div class="dialogs"> 
     <div class="speech"> 
      <div class="online"> 
       <img alt="" data-bind="visible: ko.utils.unwrapObservable(IsOnline) == true" src="../img/online.png"> 
       <img alt="" data-bind="visible: ko.utils.unwrapObservable(IsOnline) == false" src="../img/offline.png"> 
      </div> 
      <div class="ava"> 
       <img alt="" data-bind="attr: { src: ko.utils.unwrapObservable(AvaUrl) }"> 
      </div> 
      <div class="name" data-bind="text: ko.utils.unwrapObservable(UserName), click: $root.modal(UserName)"></div> 
      <%--<div class="dateok" data-bind="text: $data.Timer"></div>--%> 
      <div class="text" data-bind="text: ko.utils.unwrapObservable(LastMessage)"></div> 
     </div> 
    </div> 
</div>

P.S. 그래서, 여기에 뷰 모델입니다 죄송합니다. 저는 바인딩 바인딩 구문을 너무 빠르게 변경했습니다. 현재 가장 최신이며, 제가 말하고있는 것입니다.

출처

2014-10-03 andrey.shedko

에 설명되어 있습니다

핸들러의 "모델"인수로 전달됩니다 마크 업 표시하고 싶지 않습니다. –

바인딩에서 'bind'는 어떻게 되었습니까? 이전에 가지고 있던 것과 같은 올바른 systax'$ root.modal.bind ($ data, UserName) '입니다 ... – nemesv

죄송합니다. 그 사람이 틀 렸습니다. –

은 사용자가 function을 전달하지 않았기 때문에 잘못되었으므로 결과가 잘못되었습니다. 따라서 KO는 요소를 클릭 할 때가 아니라 바인딩을 처리 할 때 한 번만 함수를 실행합니다.

당신은 당신이 pass in additional arguments to a click handler:

<div class="name" data-bind="text: ko.utils.unwrapObservable(UserName), 
            click: $root.modal.bind($data, UserName)"></div>

또는

<div class="name" data-bind="text: ko.utils.unwrapObservable(UserName), 
          click: function() { $root.modal(UserName) }"></div>

참고하려는 경우 새로운 기능에 bind를 사용하거나 포장해야 당신이합니다 (ko.utils.unwrapObservable 필요하지 않습니다 UserName) 그냥 쓰기 text: UserName

왜냐하면 귀하의 UserName 관찰 할 수 있기 때문에 당신은 그것을 처리해야합니다 UR modal 기능 :

self.modal = function (un) { 
    localStorage.clear(); 
    localStorage.setItem("speakto", ko.utils.unwrapObservable(un)); 
    window.location.replace("http://somehost/operator/dialog"); 
}

또는 클릭이 click: $root.modal.bind($data, ko.utils.unwrapObservable(UserName))

주와 값에 패스를 바인딩 있는지 확인하십시오 : KO 2.3 이후의 ViewModel이 ko.utils.unwrapObservable의 약어이며, 당신은 단지 ko.unwrap

출처

2014-10-03 07:19:27 nemesv

예, 당신의 최선의 해결책은 self.modal에서 관찰 가능한 통과 처리입니다. –

하게 쓸 수 있습니다 JS에서 다음과 같이 정의됩니다.

viewModel = { 
    clickHandler: function(model, e) { alert(JSON.stringify(model)); } 
}

다음과 같이 바인딩 할 수 있습니다. 당신이 그것을 클릭하면

data-bind="click: clickHandler"

는 $ 데이터 그것은 내가 아니라 "somehost"로 변경 않은 knockout docs

출처

2014-10-03 07:22:44 TSV

Knockout.js 클릭 바인딩 이상한 동작

답변

관련 문제