ko.computed with passed argument shows,하지만 값이 아닙니다.

Question

내 작업은 연결된 관찰 가능 항목이 변경 될 때마다 링크에 동적으로 "href 's"를 형성하는 것입니다. 이 달성 때이 두 가지 문제 만난 JS Fiddle example link

: 내가 어떤 문자열 + 관찰 계산을 통과 할 때, 내가 기능 목록을 계산 얻을

• 을 대신 여기에 예를 들어 링크입니다 그것의 가치의. 내가 적합하지에 근처에도 찾아 어떤

  http://fiddle.jshell.net/3DAfQ/1/show/#someHash/function h(){if(0<arguments.length)return"function"===typeof v?v.apply(d,arguments):j(Error("Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters.")),this;n||g();b.r.Wa(h);return l} 
  

  : 같은

  <a data-bind="attr: {href : '#someHash/' + getHref(10)}">Link</a> 
  

  링크 보인다.

• 초, 관측 가능을 변경하려고하면 계산 결과가 달라 지므로 링크가 변경되지 않습니다.

  <a data-bind="attr: {href : '#someHash/' + getHref(10)}">Link</a> 
  <a href="#" data-bind="click: changeStoreHref(20)">change Link</a> 
  

  그리고 knockoutjs : JS Fiddle example link 감사 :

  function viewModel() 
  { 
      var self = this; 
      self.storeHref = ko.observable('ten'); 
  
      self.getHref = function(id) 
      { 
       return ko.computed({ 
        read: function() 
        { 
         self.storeHref(id); 
         return self.storeHref(); 
        } 
       }); 
      }; 
  
      self.changeStoreHref = function(num) 
      { 
       self.storeHref(num); 
      }; 
  } 
  
  ko.applyBindings(new viewModel()); 
  

  난 당신이 링크를 다음에이 예제를 확인할 수 있음을 상기시켜 여기

  <a href="#" data-bind="click: changeStoreHref(20)">change Link</a> 
  
  self.changeStoreHref = function(num) 
  { 
      self.storeHref(num); 
  }; 
  

는 HTML 코드입니다.

Answer 1

작업 버전이 보일 수 있습니다 같은 :

HTML :

<a data-bind="attr: {href: link}">Link</a> 
<a href="#" data-bind="click: changeStoreHref">change Link</a> 

자바 스크립트 :

function viewModel() 
{ 
    var self = this; 
    self.storeHref = ko.observable(1); 

    self.link = ko.computed(function() { 
     return '#someHash/' + self.storeHref(); 
    }); 

    self.changeStoreHref = function() { 
     self.storeHref(self.storeHref() + 1); 
    }; 
} 

ko.applyBindings(new viewModel()); 

바이올린 : http://jsfiddle.net/3DAfQ/6/

첫 번째 문제에 대한 이유는 당신이 있다는 것입니다 호출 결과를에게 반환그것은 함수입니다. 일반적으로 다른 관찰 가능 항목에 종속 된 계산을 정의하고 실행을 통해 평가합니다.

var observable = ko.observable(); // this returns a function 
var computed = ko.computed(function() { return observable; }); // this also returns a function 
console.log(computed()); // logs undefined 
observable('hello world'); // that call will update the computed 
console.log(computed()); // logs hello world 
console.log(computed); // this will log the function itself as in your exemple 

다음 문제는 클릭 이벤트 처리기의 바인딩입니다. data-bind="click: changeStoreHref(20)"을 바인딩합니다. HTML이 ko로 파싱되면 changeStoreHref(20)을 실행하고 결과에 대해 undefinded을 바인드합니다. 부작용으로 이미 self.storeHref을 20으로 설정합니다.

당신은 당신이 함수 반환해야 다음 바인딩을 클릭 변수화 할 필요가 시나리오가있는 경우 :

HTML :

<a data-bind="attr: {href: link}">Link</a> 

<a href="#" data-bind="click: changeStoreHref('test')">change Link</a> 

자바 스크립트 :

function viewModel() { 
    var self = this; 
    self.storeHref = ko.observable(1); 

    self.link = ko.computed(function() { 
     return '#someHash/' + self.storeHref(); 
    }); 

    self.changeStoreHref = function (para) { 
     return function() { 
      self.storeHref(para); 
     } 
    }; 
} 

ko.applyBindings(new viewModel()); 

바이올린 : http://jsfiddle.net/dfLaK/1/를