2

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

实现这一目标时我遇到了两个问题：

  • 当我尝试传递一些字符串 + 计算的 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>

和淘汰赛：

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 示例链接 谢谢。

4

1 回答 1

6

工作版本可能如下所示：

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/

于 2013-04-26T11:21:44.083 回答