與傳遞的參數ko.computed顯示功能，但沒有一個值

Question

我的任務是形式的「href的」的鏈接，每次一個附加的可觀測改爲動態地。這裏是鏈接中的示例： JS Fiddle example link

實現這一目標時，我遇到了兩個問題：

• 當我試圖通過一些字符串+計算觀察到的，我得到計算 功能列表，而不是它的價值。

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

  鏈接看起來像：

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

下面是HTML代碼：

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

而且knockoutjs：

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()); 

我提醒，你可以檢查以下鏈接這個例子：JS Fiddle example link 感謝。

Answer 1

工作版本可能看起來像：

HTML：

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

的JavaScript：

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/

原因你的第一個問題是，你是將呼叫結果返回ko.computed()，這是一個功能。通常，您將定義一個計算這是依賴於其他觀測，並通過執行來評價它：

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)"。當用ko解析HTML時，它執行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> 

的JavaScript：

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/