带有传递参数的 ko.computed 显示函数，但不是值

Question

我的任务是为链接动态形成“href”，每次更改附加的可观察对象时。这是一个示例的链接： JS Fiddle example link

在实现这一点时我遇到了两个问题：

• 当我尝试传递一些字符串 + 计算的 observable 时，我得到了计算 函数列表，而不是它的值。

  <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/