2

私の仕事は、添付されたオブザーバブルが変更されるたびに、リンクの「href」を動的に形成することです。例のリンクは次のとおりです: JS Fiddle example link

これを達成するとき、私は2つの問題に遭遇しました:

  • 文字列 + 計算されたオブザーバブルを渡そうとすると、値の代わりに計算された関数のリストが表示されます。

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

    これは適切でさえありません。

  • 2 番目に、監視可能な、計算された依存関係を変更しようとすると、リンクは変更されません。

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

そしてノックアウトjs：

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 ありがとうございます。

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)"ます。HTML が ko によって解析されると、それが実行されchangeStoreHref(20)、結果である に対してバインドされますundefinded。副作用として、すでにself.storeHref20 に設定されています。

クリック バインディングをパラメーター化する必要があるシナリオがある場合は、関数を返す必要があります。

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 に答える