Question

我的任务是每次更改附加的observable时动态地为链接形成“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}

我发现哪个不合适。

第二，当我尝试更改一个observable时，计算依赖于，链接不会改变。

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

ko.computed with pass参数显示函数，但不是值

1 个答案: